HTML5输入类型数字重新格式化长数字

Question

我有一个应用程序，用户必须在数字类型的文本框中输入至少15个数字。

如果用户输入了更长的数字，有时会达到19位或更多，然后使用右侧的箭头或键盘上的箭头键，它会自动将数字格式化为带有e+的浮点数，显然这不是理想的情况。

<input min="0" type="number" value="7897894561234567898">

最好的方法是要么消除这种行为，要么对抗它。有什么可以做的吗？还是必须使用文本类型输入框？（我不想这样做）。

- G.Hunt

---

我可以在Chrome中看到e+, 但在Firefox中，我甚至无法使用箭头来更改数字，而且Firefox还将它转换为7897894561234570000。 - j08691

你真的需要上/下箭头吗？ - Josh Lee

@Josh Lee，不是的，但当用户按键盘上的上/下箭头时也会发生这种情况。 - G.Hunt

Answer 1

HTML5的<input type=number>使用了与JavaScript相同的Number类型。在 JavaScript 中，最大整数值为9007199254740991，共16位数字，超过这个范围，需要将其作为字符串处理。

如果需要处理更大的整数，在 JavaScript 中需使用字符串类型。建议使用<input type=text>来实现验证，并设置pattern和inputmode属性以适应触摸屏幕设备。默认验证消息不太有用，因此还应处理'invalid'事件。

（只是开玩笑，inputmode目前任何地方都不支持。建议在触摸屏幕设备上使用<input type=tel>显示数字键盘。）

<form>
  <input name=num type=tel
         required pattern="\d+"
         oninvalid="setCustomValidity('A number is required')"
         oninput="setCustomValidity('')">
  <input type=submit>
</form>

在规范中提到了关于信用卡号码的注释：

type=number 状态不适用于只包含数字但严格意义上不是数字的输入。例如，对于信用卡号码或美国邮政编码，使用它是不合适的。判断是否应该使用 type=number 的一个简单方法是考虑输入控件是否应该具有微调框界面（例如，“向上”和“向下”箭头）。

请参见：https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)

- Josh Lee