<input type = "number" / "> does not show the numeric keypad on iOS

Question

According to Apple documentation , when I set up an input element with type number , I have to get a numeric keypad.

 <input type="number"/> 

number : Text field to indicate the number. Displays a keyboard with numeric keypads in iOS 3.1 and later.

It seems damn nearly impossible to spoil. However, when I look at this simple script on my iPhone or simulator (iOS6), the number keypad does not appear, and instead I get a standard alphabetic keypad.

http://jsfiddle.net/Cy4aC/3/

What could I possibly mess up here?

Answer 1

You need to specify a template:

 <input type="number" pattern="\d*"/> 

Like number , it can also be negative or floating point, so - and . and should be accessible on the keyboard, unless you specify only a pattern with numbers.

Answer 2

I'm not sure if this is what you want, but the input type = "tel" will give you a "phone number".

Answer 3

In my experience, this is very inconsistent in browsers. iOS went back and forth supporting it correctly for my use case. Usually I just want the default displayed keyboard to be numeric. The last time I checked, using the input type = "number" correctly displays the numeric keypad, but the "size" attribute is ignored, which badly discards my mobile format. I added an attribute to all the inputs that I would prefer to use the default numeric keypad, and I used jQuery to change any attributes (ie Type = "number") when the browser detects that it is working correctly. This way, I don’t need to go back and update individual inputs and allow it to be used only in supported browsers.

It would be great if the main O / S mobile device had the default keyboard attribute, except for the input type. What if the user enters an address or zip code? Usually they start with numbers, so by default a keyboard with a number is displayed, but ANY text is allowed.

As for validation, I cannot rely on a browser to support validation for certain types of input, so I use JavaScript-based and server-side validation.

Answer 4

After reading and trying a lot of ideas, none of what I found worked to accurately show the keyboard with numbers and a coma or dot.

I ended up using only this <input type="number"> and the onkeyup handler on this input, where I am doing something like this:

 var previousValue = localStorage.getItem('myInputId'); if (input.getAttribute('type') === "number" && input.validity && input.validity.badInput) { input.value = previousValue || ""; } localStorage.setItem('myInputId', input.value); 

This does not allow the user to write incorrect characters, replacing the value with the previous one, if there is a validity error (I do not know if this is an object or an iOS standard)

Beware, I have not tested this piece of code because I have more complicated things on my side, but I hope you get the idea

With this solution:

• In iOS: the user has a full classic keyboard, but by default it is open by numbers and cannot spell incorrect characters.
• Android has the perfect keyboard.
• In the future, we can hope that iOS will call a good keyboard for numbers and that part of javascript will never be called.

Answer 5

Hey. I know this question is old, but I felt its very popular solution and decided to post the answer.

Here's the solution I created for , on the iPad keyboard , as well as just about everything.

In addition, this approach does not require the use of entering a type number , which in my humble opinion is very ugly.

Below you can find a working version.

Thoughts on Apple iPad Keyboards ...

I needed to create a keyPress event handler to capture and suppress keys on iPads that don't seem to be handled by the keyDown event or are ambiguous ???!

 // Bind keydown event to all input type=text in form. $("form input[type=text]").keydown(function (e) { // Reference to keyCodes... var key = e.which || e.keyCode; // Reference to shiftKey... var shift_key = e.shiftKey; // Reference to ctrlKey... var ctrl_key = e.ctrlKey; // Reference to altKey... var alt_key = e.altKey; // When user presses the shiftKey... if(e.shiftKey) { //...supress its click and whatever key follows after it. console.log(e.shiftKey + ' and ' + key + ' supressed.'); // Deny return false; // ONLY Allow Numbers, Numberpad, Backspace & Tab } else if ( (key >= 48 && key <=57) || (key >= 96 && key <=105) || (key >= 8 && key <=9) ) { // Allow return true; } else { // Deny every other key and/or shift + key combination NOT explicitly declared. return false; } }); // KeyPresss to handle remaining iPAD keyboard keys! // These keys don't seem to be handled by the keyDown event or are ambiguous???! // Bind keypress event to all input type=text in form. $("form input[type=text]").keypress(function (e) { // Reference to keyCodes... var key = e.which || e.keyCode; // Reference to shiftKey... var shift_key = e.shiftKey; // Reference to ctrlKey... var ctrl_key = e.ctrlKey; // Reference to altKey... var alt_key = e.altKey; switch (key) { // Character -> ^ case 94: return false; // Character -> # case 35: return false; // Character -> $ case 36: return false; // Character -> @ case 64: return false; // Character -> & case 38: return false; // Character -> * case 42: return false; // Character -> ( case 40: return false; // Character -> ) case 41: return false; // Character -> % case 37: return false; // Character -> ! case 33: return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action=""> <label for="text1">Numbers, Numberpad, Backspace & Tab ONLY:</label> <input id="text1" type="text" placeholder="0" min="0" input pattern="[0-9]*" inputmode="numeric" value="" maxlength="4"> </form>