<input type="number"/> is not showing a number keypad on iOS

You need to specify the pattern:

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

As a number can be negative or with floating point, so the - and . and , should be available in the keyboard, unless you specify a digits only pattern.

enter image description here


As of ios 12.2 (released March 25, 2019) this solution will work and it is the simplest to implement

<input type="number" inputmode="decimal"/>

This will bring up only the number key pad without the #+* characters that come with using input="tel"


I am not sure if this is what you want but input type = "tel" will give you the "telephone number pad".


In my experience, this is very inconsistent across browsers. iOS has gone back and forth between supporting this correctly for my use case. I generally just want the default displayed keyboard to be the numeric one. The last time I checked, using input type="number" correctly brings up the numeric keyboard, but the "size" attribute is ignored, which throws off my mobile format badly. I added an attribute to all inputs that I'd prefer the numeric keyboard to use by default, and I used jQuery to change any attributes (i.e. type="number") when the browser detects as one that works correctly. That way I don't have to go back through and update the individual inputs and allows me to only apply it in supported browsers.

It would be lovely if the major mobile O/S's would have an attribute for "default keyboard" aside from the input type. What if a user is entering an address or zip code? Generally those start with numbers, so showing the number keyboard by default, but allowing ANY text, is helpful.

As far as validation, I can't rely on the browser to support validation for the specific input types, so I use javascript and server-side validation.