Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

what input field type forces the number pad mobile keyboard to come up when focused?

I tried the <input type="number" /> 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 you focus on it prompts the number keyboard instead of the alphabets. Is that even possible?

p.s. I'm not trying to validate. It would be a nice user experience, that's all.

like image 949
Ayyash Avatar asked Jul 30 '10 03:07

Ayyash


People also ask

How do you type a numeric keypad?

The Numeric Keypad is found to the right on most large keyboards. Because the Numeric Keypad is for data entry, accuracy is paramount! Type the 4 key with the index finger of your right hand. The enter key should be hit with your pinky.

Which attribute is required to open only a numeric keyboard?

To open Big Button Numpad, generally, we use the input tag attribute, type = 'number' which works right for android devices but not for IOS devices.


5 Answers

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:

  • http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/
  • http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/
like image 158
Huski Avatar answered Oct 12 '22 20:10

Huski


The official HTML5 way to handle phone numbers is:

<input type="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.

like image 45
Dori Avatar answered Oct 12 '22 22:10

Dori


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.

like image 26
fravelgue Avatar answered Oct 12 '22 22:10

fravelgue


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.

like image 30
Jeff Walters Avatar answered Oct 12 '22 21:10

Jeff Walters


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.

like image 24
d35348w Avatar answered Oct 12 '22 21:10

d35348w