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

Answer 3

type='tel' / HTML enhancement ?

If type='tel' is not part of html5, then who organizes the excact behavior of that attribute?

Hopefully, the tel attribute should accept two styles:

1. National format phone number:

Here is an example from Finland:

0401234567

1. International format phone number:

Here is the same example from Finland, but in proper international format:

+358401234567

So, in "tel" the rules should be as follows:

The first character may either be a digit or the special character "+".

Any other characters must be digits.

This format will serve for any country.

Here is another example from Australia:

+61418765432 (International format)

0418765432 (The same phone number in national format)

North americans seem to use their own format such as (212) 1234567.

But, the problem with this is, that it is incompatible with every other country.

Also it should be noted, that the length of a valid phone number may vary, both between countries and even within the same country. So, the "tel" should not force any length restriction, at least not any that is too strict.

I have no idea, what is the maximum legal phone number length in international format.

However, in Finland it is specified as 12 significant digits in the national part.

So, here is an example of the longest valid number that could be used in Finland:

0501234567890

or

+358501234567890 in international format.

In GSM mobile phones, if you use phone number as part of an AT -command, you may (in some commands) specify the type (format) of the number. But if you do not,

the default is to assume the number is in proper international format IF the number starts with the "+" character,

otherwise it is assumed to be in the national format,

meaning that a number which starts with a digit, will go to the same country the mobile phone is currently located in, unless the number starts with a known international prefix that is in effect in the country the mobile phone is currently located in.

So, is the "tel" safe to use in countries other than the USA, or does it force the number to the north american format, which is wrong for every country except for the USA ?

Answer 4

If you only need to display dedicated keyboard, without corresponding semantics, validation etc, you can use inputmode attr, eg:

<input type="text" value="+1234567890" inputmode="tel" />
<input type="text" value="123.45" inputmode="decimal" />