什么输入字段类型强制数字键盘移动键盘聚焦时出现？

Question

我试过<input type="number" />但是在Opera上输出一个奇怪的输入框和一个"向上和向下"处理程序.我所期望的是一个常规文本字段,一旦你专注于它就会提示数字键盘而不是字母.这甚至可能吗？

ps我不是想验证.这将是一个很好的用户体验,就是这样.

Answer 1

使用 pattern="[0-9]*"

• 示例数字输入: <input type="number" pattern="[0-9]*" />

• 电话输入示例: <input type="tel" pattern="[0-9]*" />

注意:不支持的浏览器type="tel"将默认为文本类型

注意:使用type="number"可能会导致某些浏览器出现问题以及信用卡,邮政编码和电话输入的用户体验,用户可能需要在输出中输入标点符号或逗号.

参考文献:

• 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/

Answer 2

处理电话号码的官方HTML5方式是:

<input type="tel">

您可能不喜欢使用Opera时使用的"奇怪的输入框" <input type="number" />,但当您想要求访问者输入数值时,这确实是适当的输入区域类型.

Answer 3

type ="number"是HTML5,许多手机不支持HTML5.对于呼叫链接,您可以使用type ="tel"或 <A href="wtai://wp/mc;600112233">Special A</A>.您也应该查看CSS WAP扩展(第56页).

编辑10/2015:
如果不是所有智能手机都支持HTML5和CSS3,那么这type="number"是最好的方法.

Answer 4

这篇文章现在无效.所有智能手机现在都支持HTML5和CSS3,因此添加type ="number"实际上会提示弹出数字键盘.我刚刚在2个不同的Android版本和iPhone上查看了它.因此,未来没有人会尝试WAP而不是正确的HTML5格式.