current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 3 down vote favorite
1

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.

share|improve this question
    
Related: How to force keyboard with numbers in mobile website in Android –  Rory O'Kane Aug 15 '13 at 22:12

3 Answers 3

up vote 12 down vote accepted

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.

share|improve this answer
    
iOS and Opea definitely treat number differently — see diveintohtml5.org/forms.html#type-number. I’ve no idea about Android. –  Paul D. Waite Aug 14 '11 at 14:33
1  
@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) –  robertc Aug 14 '11 at 15:39
1  
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. –  Robin Winslow Aug 14 '11 at 19:12
    
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.) –  scrrr Aug 14 '11 at 23:01
    
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.. –  scrrr Aug 14 '11 at 23:19
up vote 3 down vote

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" />
share|improve this answer
1  
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". –  Josh Buchea Feb 17 at 19:59
up vote 1 down vote

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 ?

share|improve this answer
    
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. –  Rory O'Kane Aug 15 '13 at 17:08
    
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. –  Rory O'Kane Aug 15 '13 at 17:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.