如何限制HTML5 "number“元素中可能的输入？

Question

对于<input type="number">元素，maxlength不起作用。如何限制该number元素的maxlength？

Answer 1

您还可以添加一个max属性，该属性将指定您可以插入的最高可能数字

<input type="number" max="999" />

如果同时添加max和min值，则可以指定允许值的范围：

<input type="number" min="1" max="999" />

上面的命令仍然不会阻止用户手动输入超出指定范围的值。相反，他将显示一个弹出窗口，告诉他在提交表单时输入此范围内的值，如以下屏幕截图所示：

​

​

Answer 2

如果您正在寻找一种Mobile Web解决方案，您希望用户看到的是数字键盘而不是全文本键盘。使用type=“电话”。它将与maxlength一起工作，这使您不必创建额外的javascript。

最大和最小仍然允许用户键入超过最大和最小的数字，这不是最优的。

Answer 3

或者，如果您的最大值为99，最小值为0，则可以将其添加到输入元素中(您的值将被您的最大值重写，等等)。

<input type="number" min="0" max="99" 
   onKeyUp="if(this.value>99){this.value='99';}else if(this.value<0){this.value='0';}"
id="yourid">

然后(如果你愿意)，你可以检查输入的是否是真正的数字