Andre Pena
Andre Pena

Reputation: 59456

When developing mobile compatible HTML apps, is there a way to specify that for a specific input[type=text] only numeric digits are allowed?

When developing mobile compatible HTML apps, is there a way to specify that for a specific input[type=text] only numeric digits are allowed?

I want the virtual keyboards to only show numbers.

Is there a way to do that?

Upvotes: 2

Views: 270

Answers (5)

Ashisha Nautiyal
Ashisha Nautiyal

Reputation: 1397

Yes bro <input type="number"> here is a complete list of all input type. http://javacourseblog.blogspot.in/2013/12/how-to-make-user-friendly-interface-for.html

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201896

You can use the attribute pattern=[0-9]. This is the logical way to specify that only digits are allowed. Browsers may or may not take this into account in their UI; currently, they don’t.

Using type=number specifies that the input data should be numeric, and this affects some browsers on mobile devices. But it is not expected to restrict data to digits (numbers may contain other characters too). It is more or less expected to create a “spinbox” control, and on some browsers, like Chrome, it already does that.

The important question is really what kind of data the field is to contain.

Upvotes: 1

Paul D. Waite
Paul D. Waite

Reputation: 98966

I think recent mobile versions of WebKit support the HTML5 input type <input type="number"> — see http://caniuse.com/#feat=forms.

It is up to each device’s browser to decide what interface to render though — there’s no way to guarantee that users will only be able to enter numbers. The link in @OnResolve’s answer provides screenshots of what various iPhones and Android phones do with it.

Upvotes: 0

OnResolve
OnResolve

Reputation: 4032

With HTML5, yes.

<input type="number" name="n">

Here is a link with all the new for types for input; http://www.petefreitag.com/item/768.cfm

Upvotes: 1

Rob
Rob

Reputation: 15168

In HTML5, you can set the attribute type="number".
Here is a test page for mobile.
Here is the spec.

Upvotes: 0

Related Questions