jQuery Mobile Force hide soft keypad on focusing text input field

Question

I have a date field on a PHP website and I'm using jQuery Mobile for mobile site.

While browsing the site on a mobile browser, (eg firefox mobile on android), on clicking on the date text input, the calendar dialog comes up, but the soft keyboard also comes up on my android (Soft keypad comes up whenever one focuses on a input field) Is there a way, I can force hide the soft keyboard ? Is there a generic javascript based trick to force hide the soft keypad (that works on all mobile devices like iphone, android etc ?

I'm using the jQuery Mobile datepicker from here TIA

Answer 1

Just found an answer to my question. (Guess I didn't search with the right keywords earlier :-|)

Adding a jQuery blur event on focus solves the issue.

Thanks to this post by Danny C

Answer 2

A more simple solution is to add readonly="true" to the input boxes that you have the datepicker attached to. Even though you can't manually type in a date, on mobile you won't have to deal with the keyboard popping up and getting in the way

Answer 3

My workaround (though I am using a different plugin: the datebox from jtsage.com) is currently the following:

• set a disabled attribute on the input
• bind a click handler to the input or its parent
• the click handler triggers .datebox('open') on the selected element

This way there is no focus element so no triggering of Android soft keyboard.

Answer 4

add the readonly attribute to your date box. (or readonly="readonly") input type="text" data-role="date" readonly

For JQM add the folloiwing files jqm.datepicker.css , jqm.datepicker.theme.css , jqueryUI.js , jqm.datepicker.js