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

javascript iphone keyboard iphone-keypad
John Vance picture John Vance · Mar 21, 2012 · Viewed 7.6k times · Source

I am using a monthpicker input (similar to jQuery UI datepicker) for a credit card expiration field.

I need to suppress the iPhone keypad because it hides the month picker.

I have tried setting the field to readonly and it is not an acceptable solution - in Safari iOS 5.1 readonly fields are skipped over in keyboard navigation (prev/next buttons on the keypad). Blurring the field is also not acceptable because it triggers validation (we are also using jQuery validation).

Is there a way to turn off the iPhone keyboard on a single field without setting it readonly or blurring it?

Answer

Samuli Hakoniemi picture Samuli Hakoniemi · Mar 22, 2012

I haven't come across the way to hide keyboard. But have you thought alternate way of displaying "input". One option would be using <input type="month" /> which brings the native month picker in iOS5.

Second option would be styling eg. span element as input element (-webkit-appearance not working on iOS), and adding tabindex for the element. This could also work, although I'm not aware of the month picker you're using.

Third option - can't you prevent the validation process when blurring the field is triggered manually?

Related questions

prevent iphone default keyboard when focusing an <input>

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 …

Read More
Detect a finger swipe through JavaScript on the iPhone and Android

How can you detect that a user swiped his finger in some direction over a web page with JavaScript? I was wondering if there was one solution that would work for websites on both the iPhone and an Android phone.

Read More
How do I correctly detect orientation change using Phonegap on iOS?

I found this orientation test code below looking for JQTouch reference material. This works correctly in the iOS simulator on mobile Safari but doesn’t get handled correctly in Phonegap. My project is running into the same issue that is …

Read More