iPhone /iOS: Presenting HTML 5 Keyboard for Postal Codes

How to open Number keyboard for iOS , android if the html5 textbox type=text?

Try this...

<input type="number" />
<input type="tel" />

Both of these present the numeric keypad when the input gains focus.

Everything else seems to bring up the standard keyboard.

you can see this For iOS

without using those we cant use any numbers key board... insence of Both iOS and ANDROID.

iOS / iPhone type number keyboard to allow colon

Unfortunately the type=number input auto validates to ensure that only numbers are entered and this can't be bypassed and regex can't be used to allow for other submissions, so while the iPhone opens up a keyboard with the numbers on top, any value other than a real number will not be passed on.

Also unfortunate, is that type=text cannot default to show the numbers on the iPhone keyboard using html or javascript.

A work around is to set the type=number before the user enters their data (this pulls up the number keyboard in iOS), and then switch to type=text etc. after the user is finished entering data.

My solution was to use:

$('#myInput').on('focus', function() {
  $(this).attr('type', 'number');
});

$('#myInput').on('keydown blur', function() {
  $(this).attr('type', 'text');
});

This was a minor adaption from the answer by Vizllx on Force iOS numeric keyboard with custom / currency pattern

Best settings for HTML input type=number, for mobile devices

For your specific task I have the extraordinary solution: we take the best solution with type="text" and pattern and then add the JavaScript which corrects the type attribute. We do it to pass through W3 validator.

The solution

// iOS detection from: stackoverflow.com/a/9039885 with explanation about MSStream
if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)
{
    var inputs = document.querySelectorAll('input[type="number"]');
    for(var i = inputs.length; i--;)
        inputs[i].setAttribute('pattern', '\\d*');
}

<input type="number" />

My solution respects all your three rules (W3 validator inclusive).

But I have to mention that in this case(with pattern) on iOS we do not have the possibility to put float numbers with numeric keypad because on iOS we do not have any keypad with numbers including points. On Android we have this possibility. If you want to have numeric keypad with float numbers then you have to write for iOS extra solution like follows:

 <input type="number" />

---

Related Topics