HTML Input Field: Automatically display numeric input method

Question

I have a web-app with a layout that is set up to work with mobile devices. However, most of my input fields in forms are numeric.

Every time I access a form with my Android phone and click into one of the input fields to make an input field, the qwerty comes up and I have to switch to numeric input method and enter some numbers. That's inconvenient.

Is there a HTML-property or sth. similar that will make Android (and iPhone) display the numeric keypad as a default?

Again, this is a Rails app and not a native smartphone app.

Any help appreciated, thanks.

Answer 1

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 type='tel' is not HTML5 standard (yet), and you don't get validation from browser. (Update 2013-08: 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.

Answer 2

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" />