HTML5输入类型=数字删除前导零

Question

在Chrome 15中,当使用元素作为文本字段时,即使输入的数字不会破坏验证规则(例如,min,max),也会删除前导零(例如011).是否有一个属性强制零在失去焦点后保留在字段中？此应用程序是数字数据,如国际电话前缀.

Answer 1

<input type="text" pattern="[0-9]*" ...

应该为你做.将打开iPhone上的数字键盘和我测试过的更好的Android手机.

Answer 2

<input type="tel">为了这个目的而被引入.它是HTML5中的新输入类型之一.

Answer 3

我需要它用于移动浏览器,我使用了这两种解决方案的混合:

<input type="tel" pattern="[0-9]*">

在iOS上,数字键盘只显示数字(没有#或*符号),而在Android手机上,"tel"被正确解释但不是模式(我的手机上还没有).

我想当 Android浏览器开始实现"模式"属性时,这应该在Android上运行正常(如whatwg规范所示).

在此之前,您必须检查输入中的非数字字符并将其删除.javascript replace(/ [^ 0-9*]/g,'')对此很有用.

希望这可以帮助

Answer 4

8年后...

当心：
使用的答案type="tel" 并不能完全解决问题，尤其是在数字字段中，您可能需要写浮点/小数和其他允许的字符（例如+-。，）。

解决方案：
考虑使用带有模式和输入模式的文本输入，如下所示：

<input type="text" inputmode="numeric" pattern="[-+]?[0-9]*[.,]?[0-9]+">

详细信息：
那里的模式将有助于保持前导0，并且表现得像数字字段（带有所有其他允许的字符）。
并且inputmode="numeric"将拉动数字键盘，而不是默认键盘。

Answer 5

WHATWG 在 IRC 中为我提供的答案是，对于本质上是数字的非数字（例如不是 float/int）数据，文本通常是要使用的正确输入类型。预期是如果您使用的特定输入类型（例如电话号码、日期）已经存在。

input type=number 只能用于字面数字 (int) 的输入，而不应用于使用数字的数据（例如邮政编码）。