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

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](http://stackoverflow.com/questions/6911895/disable-setting-of-focus-for-jquery-ui-datepicker) by [Danny C](http://stackoverflow.com/users/189976/danny-c) — texens, Nov 01 '11 at 20:04
if you're still looking I would suggest http://dev.jtsage.com/ DateBox — Phill Pafford, Nov 01 '11 at 20:11
@Phil, that DateBox has the same problem on my Samsung Nexus 1 running Android 4.0.3: tapping an input causes both the datebox *and* the softkeyboard to appear. — Wytze, Jun 27 '12 at 12:04

mdurchholz · Answer 1 · 2014-12-12T15:27:35.137

7

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

edited Dec 12 '14 at 15:27

answered Aug 08 '13 at 15:02

mdurchholz

523
1
4
16

This is the simplest answer. – Jason Apr 06 '18 at 19:22

score 4 · Accepted Answer · edited May 23 '17 at 11:45

4

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

edited May 23 '17 at 11:45

Community

1
1

answered Oct 28 '12 at 21:02

texens

3,717
5
23
23

score 0 · Answer 3 · answered Jun 27 '12 at 12:06

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.

score 0 · Answer 4 · answered Apr 08 '15 at 11:25

0

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

answered Apr 08 '15 at 11:25

gnganapath

917
12
16

jQuery Mobile Force hide soft keypad on focusing text input field

4 Answers4