无法为 HTML5 中的数字字段设置 maxlength 属性 [重复]答案

【问题标题】：Unable to set maxlength property for number field in HTML5 [duplicate]无法为 HTML5 中的数字字段设置 maxlength 属性 [重复]
【发布时间】：2014-12-04 05:02:51
【问题描述】：

这是一个文本字段。见..我将 maxlength 属性设置为 10。所以，只能输入 10 个字符

<input maxlength="10" id="txt_name" name="txt_name" type="text" required="required"/>

这是一个数字字段。我也希望它的 maxlength 为 10，以便用户可以输入他们的 10 位手机号码。这会限制用户输入额外的数字。

 <input id="txt_mob" name="txt_mob" type="number" maxlength="10"/>

但 maxlength 不适用于数字字段。为什么？？有什么方法可以在不使用 Javascript 或 jQuery 的情况下做到这一点？

这是FIDDLE。

【问题讨论】：

添加最小和最大问题解决
来吧，伙计！严重地？？？ @user1478 请在评论或回答之前阅读完整的问题。
除了重复之外，这是一个错误的问题，因为您不应该使用type=number 作为电话号码。对他们来说，HTML5 有type=tel。

标签： html

【解决方案1】：

数字类型不接受属性 maxlength。你可以试试这个

将类型转换为文本并使用它。

这个脚本只接受数字输入，把它放在你的页面头部。

<script>
function isNumber(event) {
  if (event) {
    var charCode = (event.which) ? event.which : event.keyCode;
    if (charCode != 190 && charCode > 31 && 
       (charCode < 48 || charCode > 57) && 
       (charCode < 96 || charCode > 105) && 
       (charCode < 37 || charCode > 40) && 
        charCode != 110 && charCode != 8 && charCode != 46 )
       return false;
  }
  return true;
}
</script>

然后在您的输入字段中使用它

onkeydown="return isNumber(event);"

例子

<input type="text" onkeydown="return isNumber(event);" maxlength="10" />

【讨论】：

我知道这段代码。我有这个。我每次都用它。但是如果 JavaScript 在用户的浏览器中被禁用怎么办？ @ruben450

【解决方案2】：

来自 mdn，

如果 type 属性的值为 text、email、search、password、tel 或 url，则该属性指定用户可以输入的最大字符数（以 Unicode 码位表示）；对于其他控件类型，将被忽略。

所以 maxlength 在

上被忽略

     <input type="number">

设计。因此，您可以使用常规文本输入并使用新模式属性对字段强制验证

     <input type="text" pattern="([0-9]{3})" maxlength="4">

希望对你有所帮助...

【讨论】：

【解决方案3】：

对于 number 类型的输入元素，您不能使用 maxlength，该属性仅适用于字符串。对于数字，您可以使用 min="0" 和 max="10"。您可以在此处查看示例：

http://www.w3schools.com/tags/att_input_max.asp

【讨论】：

【解决方案4】：

您可以使用<input type="number" name="quantity" min="1" max="9999999999">

【讨论】：

【解决方案5】：

对于输入数字，您需要使用 min/max 属性：

<input type="number" id="txt_mob" name="txt_mob" min="1" max="5">

您可以在 w3schools 网站上查看示例：

http://www.w3schools.com/tags/att_input_max.asp

【讨论】：