What Input Field Type Forces The Number Pad Mobile Keyboard To Come Up When Focused?

March 31, 2024 Post a Comment

I tried the but on Opera that outputs a strange input box coupled with an 'up and down' handler. What I expected was a regular text field that once yo

Solution 1:

Use pattern="[0-9]*"

Example number input: <input type="number" pattern="[0-9]*" />
Example phone input: <input type="tel" pattern="[0-9]*" />

Note: Browsers that do not support type="tel" will default to a text type

Beware: Using type="number" can cause problems with some browsers and user experience for credit card, postal code, and telephone inputs where a user might need to enter punctuation or a comma being in the output.

References:

Solution 2:

The official HTML5 way to handle phone numbers is:

<inputtype="tel">

You may not have liked the "strange input box" you got with Opera when you used<input type="number" />, but that really is the appropriate type of input area when you want to require visitors to enter a numeric value.

Solution 3:

type="number" is HTML5 and ~~many phones do not support HTML5~~. For call link you can use type="tel" or <A href="wtai://wp/mc;600112233">Special A</A>. You should look at CSS WAP extensions (page 56) too.

EDIT 10/2015: Most if not ALL smart phones support HTML5 and CSS3, so type="number" is the best way.

Solution 4:

This post is now invalid. All smartphones support HTML5 and CSS3 now, so adding type="number" does in fact prompt the number pad to pop-up. I just checked it on 2 different Android versions, and an iPhone. Just so no one in the future tries WAP instead of the correct HTML5 format.

Solution 5:

This will work on mobile and will prevent the letter "e" (along with all other letters) from being allowed to be typed in in the desktop version of your page. type="number" by itself still normally allows "e" per spec:

<input pattern="[0-9]*"type="text" oninput="this.value=this.value.replace(/[^0-9]/g,'');">

If you use type="number" in the above, then if you type "123" then "e" the oninput JS will replace all contents of the box. Just use type="text" if you really just want integer values.

Html5 Academy