CODEWITHSUNDEEP
javascriptjqueryiphonekeyboard
Toni Michel Caubet
Toni Michel Caubet

Reputation: 20163

prevent mobile default keyboard when focusing an <input> from showing

this is how i'm trying

<script type="text/javascript">
  $(document).ready(function(){
    $('#dateIn,#dateOut').click(function(e){
      e.preventDefault();
    }); 
  });
</script>

but the input stills 'launching' iphone's keyboard

ps: i want to do this because i'm using datepicker plugin for date

Upvotes: 108

Views: 175869

Answers (10)

Ahmet Firat Keler
Ahmet Firat Keler

Reputation: 4021

My Workaround in 2024

My problem: the first input was completely covered by the keyboard on mobile devices because of auto focusing.

I have spent lots of time to overcome the problem. My workaround is to not show the keyboard when the modal shows up. It's actually triggering a blurring on the first input. Then users can click on the input to type without any issues.

useEffect(() => {
    setTimeout(() => {
        // the modal body
        const modal = document.getElementsByClassName("modal__panel")[0] as HTMLDivElement

        if (modal) {
            // the first input that the keyboard automatically focuses on
            const firstInput = modal.getElementsByTagName('INPUT')[0] as HTMLInputElement

            if (firstInput)
                firstInput.blur()
        }
    }, 1)
}, [])

Implement this hook in the modal component. Hopefully the issue will be gone.

Upvotes: 0

vsync
vsync

Reputation: 130075

inputmode attribute

<input inputmode='none'>

The inputmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents. It can have the following values:

none - No virtual keyboard. For when the page implements its own keyboard input control.

I am using this successfully (Tested on Chrome/Android)

CSS-Tricks: Everything You Ever Wanted to Know About inputmode

Upvotes: 90

BeNice
BeNice

Reputation: 2295

I have a little generic "no keyboard" script - works for me with Android and iPhone:

  $('.readonlyJim').on('focus', function () {
      $(this).trigger('blur')
  })

Simply attach add class readonlyJim to the input tag and voila.

(*Sorry too much StarTrek here)

Upvotes: -1

Rene Pot
Rene Pot

Reputation: 24815

By adding the attribute readonly (or readonly="readonly") to the input field you should prevent anyone typing anything in it, but still be able to launch a click event on it.

This is also usefull in non-mobile devices as you use a date/time picker

Upvotes: 248

Akbar Badhusha
Akbar Badhusha

Reputation: 2627

Best way to solve this as per my opinion is Using "ignoreReadonly".

First make the input field readonly then add ignoreReadonly:true. This will make sure that even if the text field is readonly , popup will show.

$('#txtStartDate').datetimepicker({
            locale: "da",
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
        $('#txtEndDate').datetimepicker({
            locale: "da",
            useCurrent: false,
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
});

Upvotes: 2

Juan Manuel De Castro
Juan Manuel De Castro

Reputation: 198

Below code works for me:

<input id="myDatePicker" class="readonlyjm"/>


$('#myDatePicker').datepicker({
/* options */
});

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});

Upvotes: 4

Curtis
Curtis

Reputation: 3449

So here is my solution (similar to John Vance's answer):

First go here and get a function to detect mobile browsers.

http://detectmobilebrowsers.com/

They have a lot of different ways to detect if you are on mobile, so find one that works with what you are using.

Your HTML page (pseudo code):

If Mobile Then
    <input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
    <input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />

JQuery:

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max  
    });
});

This way you can still use native date selectors in mobile while still setting the min and max dates either way.

The field for non mobile should be read only because if a mobile browser like chrome for ios "requests desktop version" then they can get around the mobile check and you still want to prevent the keyboard from showing up.

However if the field is read only it could look to a user like they cant change the field. You could fix this by changing the CSS to make it look like it isn't read only (ie change border-color to black) but unless you are changing the CSS for all input tags you will find it hard to keep the look consistent across browsers.

To get arround that I just add a calendar image button to the date picker. Just change your JQuery code a bit:

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max,
        showOn: "both",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date"
    });
});

Note: you will have to find a suitable image.

Upvotes: 0

John Vance
John Vance

Reputation: 532

I asked a similar question here and got a fantastic answer - use the iPhone native datepicker - it's great.

How to turn off iPhone keypad for a specified input field on web page

Synopsis / pseudo-code:

if small screen mobile device 

  set field type to "date" - e.g. document.getElementById('my_field').type = "date";
  // input fields of type "date" invoke the iPhone datepicker.

else

  init datepicker - e.g. $("#my_field").datepicker();

The reason for dynamically setting the field type to "date" is that Opera will pop up its own native datepicker otherwise, and I'm assuming you want to show the datepicker consistently on desktop browsers.

Upvotes: 3

John Vance
John Vance

Reputation: 532

Since I can't comment on the top comment, I'm forced to submit an "answer."

The problem with the selected answer is that setting the field to readonly takes the field out of the tab order on the iPhone. So if you like entering forms by hitting "next", you'll skip right over the field.

Upvotes: 2

nachomaans
nachomaans

Reputation: 477

You can add a callback function to your DatePicker to tell it to blur the input field before showing the DatePicker.

$('.selector').datepicker({
   beforeShow: function(){$('input').blur();}
});

Note: The iOS keyboard will appear for a fraction of a second and then hide.

Upvotes: 12

Related Questions