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.

Porky

Related: How to force keyboard with numbers in mobile website in Android – Garnettgarnette

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.

Pustule

iOS and Opea definitely treat number differently — see diveintohtml5.org/forms.html#type-number. I’ve no idea about Android. – Carrol

@PaulDWaite Number type input elements show a numeric keypad on both my Android devices (Android 2.2/WebKit 3.1 & Android 2.3/WebKit 4.0) – Bans

It's important to note that how the "number" type field is displayed or effects the input device is browser-specific and subject to change (HTML5 being a draft specification). You should definitely use the "number" type for numeric fields, but it is then the browser's responsibility to render it in the most sensible and usable way - and you should just trust them to do so. – Tirza

Thank you, that worked on iPhone 4, but it didn't work on a Motorola Droid with Android 2.1. (I guess it works on 2.2+, as you mentioned, robertc. Will test later.) – Porky

Hm, this doesn't allow to enter numbers (in Chrome at least) that look like this "2.3" or "2,3" if my locale is Germany. Specifying a step of 0.1 doesn't work either.. – Porky

Thanks for all the comments. I have amended most of what I know, hope that this would make a better answer. – Pustule

type="tel" is now in the HTML standard (see the full list of input types). Also, here are some handy screenshots comparing the keyboards for tel and number. – Garnettgarnette

Another method for showing a numeric keyboard is <input type="text" pattern="\d*" />. However, this is only supported on Safari for iOS; it does not work on Android. – Garnettgarnette

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

Sletten

This method works with type="number" AND type="text". If you want the input value to be a string, use type="text". If you want the input value to be a number use type="number". – Pocked

iOS 10.2 this one worked while the comment without pattern did not work. Thanks for the information. – Savdeep

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:

[phone]

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:

[phone] (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

[phone] 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 ?

War

The specification for input type="tel" notes that “the Telephone type does not enforce a particular syntax”, and encourages you to “use the pattern attribute” if you “need to enforce a particular format”. So input type="tel" helps the user type a telephone number, but doesn’t necessarily guarantee that it will be in any particular format. – Garnettgarnette

Next time, you should ask this as a new question, since you don’t answer this question. If necessary, you can put links in your question to other relevant questions. – Garnettgarnette

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="[phone]" inputmode="tel" />
<input type="text" value="123.45" inputmode="decimal" />

Samella