Chrome 中输入类型 =“数字” 的最大长度被忽略

Question

maxlength 属性不适用于 <input type="number"> 。这只发生在 Chrome 中。

 <input type="number" class="test_css"  maxlength="4"  id="flight_number" name="number"/>

原文由 Prajila V P 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

来自 MDN 的文档 <input>

If the value of the type attribute is text , email , search , password , tel , or url ，该属性指定了用户可以输入的最大字符数（Unicode代码点）；对于其他控件类型，它会被忽略。

因此 maxlength 在设计上被忽略了 <input type="number"> 。

根据您的需要，您可以使用 min 和 max 在 他/她的回答中建议的属性（注意：这只会定义一个约束范围，而不是实际字符长度该值，尽管 -9999 到 9999 将涵盖所有 0-4 位数字），或者您可以使用常规文本输入并使用新的 pattern 属性在字段上强制执行验证：

 <input type="text" pattern="\d*" maxlength="4">

原文由 André Dion 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

最大长度不适用于 <input type="number" 我知道的最好方法是使用 oninput 事件来限制最大长度。请看下面的代码。

 <input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />

原文由 Avinash Jain 发布，翻译遵循 CC BY-SA 3.0 许可协议