我怎么能设置最大长度在HTML5“输入类型=数字”元素?

对于<input type="number">元素，maxlength无效。如何限制该数字元素的最大长度?

当前回答

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

Max和Min仍然允许用户输入超过Max和Min的数字，这不是最佳的。

其他回答

您可以指定min和max属性，这将只允许在特定范围内输入。

<!-- equivalent to maxlength=4 -->
<input type="number" min="-9999" max="9999">

然而，这只适用于旋转控制按钮。尽管用户可以输入大于允许的最大值的数字，但表单将不会提交。

截图来自Chrome 15

你可以在JavaScript中使用HTML5的oninput事件来限制字符的数量:

myInput.oninput = function () {
    if (this.value.length > 4) {
        this.value = this.value.slice(0,4); 
    }
}

设置数字输入的maxlength的一个简单方法是:

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />

正如其他人所说，min/max与maxlength不同，因为人们仍然可以输入一个比您想要的最大字符串长度更大的浮点数。为了真正模拟maxlength属性，你可以在紧要关头做这样的事情(这相当于maxlength="16"):

<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">

更相关的属性是min和max。

<input type="number" onchange="this.value=Math.max(Math.min(this.value, 100), -100);" />

或者如果你想什么都不能输入

<input type="number" onchange="this.value=this.value ? Math.max(Math.min(this.value,100),-100) : null" />

推荐文章