HTML Input Field: Automatically display numeric input method
In HTML 5, type='number'
says that a field expects only numbers and modern browsers would allow only numberic inputs.
<input type='number' value='123' />
EDIT:
Let me amend a bit, since judging from the comments the original answer is a bit shallow for most.
Basically, you have three choices: type='number'
, type='range'
, and type='tel'
. None of them are guarenteed to work. The result varies by both browser and keyboard.
For example, my Android Opera Mobile doesn't ask for a numeric keyboard, but it does add a spinbox to the number
field like the desktop version. A spinbox that works with step='0.1'
, but not really suitable for mobile use with current implementation.
On my Android Firefox 5, number
doesn't yield numeric keyboard with my stock input either - this is where I start to doubt whether my stock keyboard support numeric - but tel
does! And with dot! As well as ABC DEF GHI for 1 2 3 which gives it out.
However (Update 2013-08: type='tel'
is not HTML5 standard (yet), and you don't get validation from browser.tel
has been made a HTML5 standard! I'm not sure when...)
As for range
, the specs expects that browser provide slider instead of input box. Some do, some don't, and iPhone Safari is in the later camp last I checked. If you don't mind the varying presentation it can be a better choice.
Yeah, I know. Welcome to HTML 5 development. Things are improving; I hope you won't be put off by the storm we are in right now.
I've found that combining 2 methods will allow this to happen.
In most Android browsers, setting type="number
should do the trick most of the time. However, in iOS this will bring up the normal keyboard, but defaulted to the number and special character page. I prefer the phone dialer type input. To accomplish this in iOS use the pattern
attribute. The final HTML element will look like:
<input type="number" pattern="[0-9]*" value="123" />