CODEWITHSUNDEEP
mobilemobile-website
divided
divided

Reputation: 1319

Force Numeric Keyboard for Mobile Device

This is not a "mobile" website. It is regular HTML/CSS. Is there a way I can force mobile devices to popup with the numeric keyboard when they focus on my textboxes?

Upvotes: 10

Views: 21343

Answers (5)

pomaaa
pomaaa

Reputation: 615

I know this is an old question but I was searching for the answer and here is the updated version that should work now.

There is an option to additionally add this to your input:

inputmode="numeric"

So it will be like this:

<input inputmode="numeric" type="number"/>

Upvotes: 1

Kamakazy
Kamakazy

Reputation: 109

Just updating this post based on new tech..

<input type="number"/>

Works on most OS's aside from iOS.

So a newer version was introduced where you could simply use:

<input type="tel"/>

This forces a numbered keypad on any mobile device these days.

You can reference here for more info on this exact topic.

Upvotes: 9

awayken
awayken

Reputation: 485

We've had the best luck with using a combination of type="number" and pattern="\d*". We've 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">

Upvotes: 18

danallison
danallison

Reputation: 48

HTML5 has a new input type "number" that tells mobile devices to bring up the numeric keypad:

<input type="number"/>

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

Upvotes: 0

nLL
nLL

Reputation: 5672

Its called "-wap-input-format". You can use it in your css or in style element such as

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

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

Edit: I didn't realize you wanted to pop-up numeric keyboard. I'm not sure if it is possible

Upvotes: 5

Related Questions