javascript - How to turn off iPhone keypad for a specified input field on web page - Stack Overflow

admin管理员组

文章数量:1345730

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?

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?

• javascript
• iphone
• keyboard
• iphone-keypad

Share Follow edited Mar 22, 2012 at 6:42 Parth Bhatt 19.5k2828 gold badges136136 silver badges216216 bronze badges asked Mar 21, 2012 at 20:10 John VanceJohn Vance 53244 silver badges1515 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

I haven't e 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?

I had a same Issue in Drupal, where the input fields will be appending dynamically, so i added some js, checking for Iphone/Ipad and added "readonly" property

var checkUserAgent = navigator.userAgent;
    if (checkUserAgent.match(/iPad/i) || checkUserAgent.match(/iPhone/i)) {
        var checkBabyId1 = $('#babys_due_date_id').length > 0;
        if (checkBabyId1 == true) {
            $('#babys_due_date_id').find('input').prop('readonly', true);
        }
    }

本文标签： javascriptHow to turn off iPhone keypad for a specified input field on web pageStack Overflow