HTML5的输入类型为数字会去掉前导零

Question

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

- Evan

---

这个表单的结构是怎样的？数字是放在一个文本框中还是分别放在不同的文本框中？ - Edwin

表单是一个相当标准的表单。包含多个字段，其中包括文本、单选框、复选框、日期和数字等各种输入方式。在这种特定情况下，我想在我的数字字段（如邮政编码）中使用数字。 - Evan

Answer 1

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

这段代码可以让iPhone上的数字键盘以及我测试过的更好的Android手机弹出。它是一个文本框，只允许输入数字。

- Lar

---

如果您不想使用手机键盘上的额外符号（如“＃”和“*”），那么这就是真正的答案。 - Alex Wayne

似乎在使用Android和Chrome时，会出现文本键盘。 - chhantyal

恐龙在6500万年前灭绝了。 - candlejack

@alessandro他们的幽灵仍然存在。 - DROP TABLE users

Answer 2

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

- Dennis Traub

---

谢谢您的建议！但是，我还有一些邮政编码和其他数字信息字段，前导零很重要。我希望我的标记尽可能语义化，并寻找一种方法来确保零保持不变，而不管具体用途如何，而且不使用通用类型 input。 - Evan

number 显然不符合你的需求，而 tel 符合。你问是否有一种属性不会删除前导数字，答案是：tel。此外，输入类型更多关乎用户界面（如在智能手机上显示哪种键盘等），而非语义。 - Dennis Traub

使用\d{5}-?(\d{4})?这样的模式非常适合用于邮政编码。 - Lefka

Answer 3

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

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

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

我猜当Android浏览器开始实现“pattern”属性时，这个问题在Android上也应该能正常工作（如whatwg规范所建议的那样）。

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

希望这可以帮到您。

- Guillaume Gendre

Answer 4

8年后...

注意：
使用type="tel"的答案不能完全解决问题，特别是在数字字段的情况下，您可能希望编写浮点/小数和其他允许的字符（如+-.，）。

解决方案：
考虑使用带有模式和输入模式的文本输入，就像这样：

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

详情：
那里的模式将有助于保留前导零，并像数字字段一样运行（包括所有其他允许的字符）。
而 inputmode="numeric" 将调用数字键盘而非默认键盘。

- Just Shadow

---

这会破坏一些功能，比如无法使用上/下箭头来分别增加和减少输入值。 - Wojciech Maj

inputmode目前并不支持所有浏览器（仅限Chrome/Opera）。MDN表示如下：

WHATWG规范列出了inputmode，并且现代浏览器正在努力支持它。然而，W3C HTML 5.2规范不再列出它（即将其标记为过时）。在达成共识之前，您应该将WHATWG定义视为正确的。

- stephanfriedrich

更新：它在Chrome、Mozilla、Opera和Edge以及所有移动浏览器上都得到了支持。唯一的例外是桌面版Safari（尽管在iOS上它可以正常工作）。有关更多信息，请参见inputMode支持。 - Just Shadow

Answer 5

在IRC上，WHATWG给我的答复是：对于非数字类型（例如不是浮点数/整数）但具有数字特性的数据，文本通常是正确的输入类型。唯一的例外情况是，如果您正在使用某些已经存在特定输入类型的东西（例如电话号码，日期）。

只应将input type = number用于实际上是数字（int）而不是使用数字（例如邮政编码）的数据的输入。

- Evan