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

Question

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

P.S。我不是想验证。这将是一个很好的用户体验，就是这样。

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">

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

Answer 3

type =“number”是HTML5，许多手机不支持HTML5 。 对于呼叫链接，您可以使用type =“tel”或 <A href="wtai://wp/mc;600112233">Special A</A>。 你也应该看看CSS WAP extensions (page 56)。

编辑10/2015：
大多数（如果不是全部）智能手机都支持HTML5和CSS3，因此type="number"是最佳方式。

Answer 4

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

Answer 5

这将在移动设备上起作用，并且将阻止在页面的桌面版本中输入字母“ e”（以及所有其他字母）。 type="number"本身通常仍按规范允许使用“ e”：

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

如果在上面使用type="number"，那么如果您键入“ 123”然后输入“ e”，则oninput JS将替换该框中的所有内容。如果您确实只是整数值，请使用type =“ text”。

Answer 6

试试<input type="number" pattern="/d*"> 要么 <input type="tel" pattern="/d*"> 如果您使用Android，这将有所帮助。