问题
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.
回答1:
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.
回答2:
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/
回答3:
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.
回答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.
回答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.
回答6:
Try <input type="number" pattern="/d*">
OR
<input type="tel" pattern="/d*">
This will help if you working with Android.
来源：https://stackoverflow.com/questions/3368546/what-input-field-type-forces-the-number-pad-mobile-keyboard-to-come-up-when-focu