Force Numeric Keyboard for a mobile device

Question

This is not a "mobile" website. This is plain HTML / CSS. Is there a way to make mobile devices pop up using the numeric keypad when they focus on my text windows?

Answer 1

We were lucky using a combination of type="number" and pattern="\d*" . We have seen success on iOS and Android devices, although I don't have a list of OS versions to share here.

 <input type="number" pattern="\d*" name="year"> 

Answer 2

It is called "-wap-input-format". You can use it in your CSS or in a style element like

 <input type="text" style="-wap-input-format: 'N'"/> 

See http://www.developershome.com/wap/wcss/wcss_tutorial.asp?page=inputExtension2

Edit: I did not understand that you want to pop up on the numeric keypad. I am not sure if this is possible.

Answer 3

Just updating this post based on new technologies.

 <input type="number"/> 

Works on most OS aside from iOS.

So, a new version has appeared where you could just use:

 <input type="tel"/> 

Currently, it forces a numbered keyboard on any mobile device.

You can link here for more information on this exact topic.

Answer 4

HTML5 has a new type of input, "number", which tells mobile devices that a numeric keypad is approaching:

<input type="number"/>

Read about this (and other new input types) here: http://html5doctor.com/html5-forms-input-types/