HTML5 Input type=number 删除前导零答案

【问题标题】：HTML5 Input type=number removes leading zeroHTML5 Input type=number 删除前导零
【发布时间】：2012-01-16 06:36:46
【问题描述】：

在 Chrome 15 中，将元素用作文本字段时，即使输入的数字不违反验证规则（例如 min、max），前导零（例如 011）也会被删除。是否有一个属性可以在失去焦点后强制零留在该字段中？对此的应用是数字数据，例如国际电话前缀。

【问题讨论】：

【解决方案1】：

<input type="tel"> 正是为此目的而引入的。它是 HTML5 中的新输入类型之一。

【讨论】：

感谢您的建议！但是，我也有邮政编码和其他信息性数字字段，其中前导零很重要。我想让我的标记尽可能语义化，并且正在寻找一种方法来确保零保留，无论具体用途如何，并且不诉诸通用 type=input
number 显然不能满足您的需求，而 tel 可以。您询问是否有不删除前导数字的属性。好吧：tel 就是答案。此外，输入类型与语义无关，而与用户界面（在智能手机上显示哪个键盘等）有关。
将其与\d{5}-?(\d{4})? 模式一起使用非常适合邮政编码。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

应该为你做。将在 iPhone 和我测试过的更好的 Android 手机上调出数字键盘。

【讨论】：

【解决方案4】：

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

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

在 iOS 上，数字键盘仅显示可用的数字（没有 # 或 * 符号），而在 Android 手机上，“tel”被正确解释，但不是模式（在我拥有的几部手机上还没有）。

我猜当android浏览器开始实现“模式”属性时，这在android上也应该可以正常工作（如the whatwg spec suggests）。

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

希望对你有帮助

【讨论】：

【解决方案5】：

8 年后...

当心：
使用type="tel" 不的答案完全解决了这个问题，特别是在数字字段的情况下，您可能想要编写浮点数/十进制数和其他允许的字符（如 +-., )。

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

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

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

【讨论】：

这破坏了一些功能，比如能够使用向上/向下箭头分别增加和减少输入值。
目前并非所有浏览器都支持输入模式（仅 Chrome/Opera）。 MDN 说： > WHATWG 规范列出了输入模式，现代浏览器正在努力支持它。然而，W3C HTML 5.2 规范不再列出它（即将它标记为过时）。在达成共识之前，您应该认为 WHATWG 的定义是正确的。
更新：Chrome、Mozilla、Opera 和 Edge 以及所有移动浏览器支持。唯一的例外是桌面上的 Safari（尽管对于 iOS，它工作正常）。欲了解更多信息，请参阅inputMode support