Html 什么输入字段类型会强制数字键盘移动键盘在聚焦时出现？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3368546/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
what input field type forces the number pad mobile keyboard to come up when focused?
提问by Ayyash
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?
我试过<input type="number" />但在 Opera 上输出一个奇怪的输入框和一个“上下”处理程序。我期望的是一个普通的文本字段，一旦你专注于它，就会提示数字键盘而不是字母。这甚至可能吗？
p.s. I'm not trying to validate. It would be a nice user experience, that's all.
ps 我不是要验证。这将是一个很好的用户体验，仅此而已。
采纳答案by fravelgue
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.
type="number" 是 HTML5 并且很多手机不支持 HTML5。对于呼叫链接，您可以使用 type="tel" 或
<A href="wtai://wp/mc;600112233">Special A</A>. 您也应该查看CSS WAP 扩展（第 56 页）。
EDIT 10/2015:
Most if not ALL smart phones support HTML5 and CSS3, so type="number"is the best way.
编辑 10/2015：
大多数（如果不是全部）智能手机都支持 HTML5 和 CSS3，所以type="number"是最好的方法。
回答by Huski
Use pattern="[0-9]*"
用 pattern="[0-9]*"
Example number input:
<input type="number" pattern="[0-9]*" />Example phone input:
<input type="tel" pattern="[0-9]*" />
示例数字输入：
<input type="number" pattern="[0-9]*" />电话输入示例：
<input type="tel" pattern="[0-9]*" />
Note:Browsers that do not support type="tel"will default to a text type
注意：不支持的浏览器type="tel"将默认为文本类型
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.
注意：使用type="number"信用卡、邮政编码和电话输入可能会导致某些浏览器和用户体验出现问题，用户可能需要在输出中输入标点符号或逗号。
References:
参考：
回答by Dori
The official HTML5 way to handle phone numbers is:
处理电话号码的官方 HTML5 方式是：
<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.
当您使用 Opera 时<input type="number" />，您可能不喜欢 Opera 的“奇怪的输入框” ，但是当您想要要求访问者输入数值时，这确实是合适的输入区域类型。
回答by Jeff Walters
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.
该帖子现已无效。现在所有的智能手机都支持 HTML5 和 CSS3，因此添加 type="number" 确实会提示数字键盘弹出。我刚刚在 2 个不同的 Android 版本和 iPhone 上进行了检查。只是，将来没有人会尝试 WAP 而不是正确的 HTML5 格式。
回答by d35348w
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:
这将适用于移动设备，并防止在您的页面的桌面版本中输入字母“e”（以及所有其他字母）。type="number"本身通常仍然允许每个规范“e”：
<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 oninputJS will replace all contents of the box. Just use type="text" if you really just want integer values.
如果您type="number"在上面使用，那么如果您输入“123”然后输入“e”，oninputJS 将替换框中的所有内容。如果您真的只想要整数值，只需使用 type="text" 。
回答by souvik
Try <input type="number" pattern="/d*">OR
<input type="tel" pattern="/d*">This will help if you working with Android.
尝试<input type="number" pattern="/d*">OR
<input type="tel" pattern="/d*">如果您使用 Android，这将有所帮助。
