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

Question

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

如果用户输入更长的数字，有时 >= 19 位，然后使用右侧的箭头或键盘上的箭头键，它会自动将数字格式化为最后一个浮点数，e+这显然不是理想的.

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

消除或抵消这种行为的最佳方法是什么？有什么事情要做，还是我必须使用文本类型输入？（我宁愿不）。

Answer 1

HTML5<input type=number>特别使用与 JavaScript 相同的 Number 类型。精度丢失前的最大整数值为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)