对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
您可以添加一个max属性,该属性将指定您可以插入的最大数字
<input type="number" max="999" />
如果你同时添加Max和min值,你可以指定允许值的范围:
<input type="number" min="1" max="999" />
以上仍然不会阻止用户手动输入指定范围之外的值。相反,他会看到一个弹出窗口,告诉他在提交表单时输入一个范围内的值,如下面的截图所示:
其他回答
您可以指定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);
}
}
//对于Angular,我添加了如下代码片段。 < div ng-app = " " > < >形式 输入数字:<input type="number" ng-model="number" onKeyPress="if(this.value.length==7) return false;" min="0"> > < /形式 <h1>输入:{{number}}</h1> < / div >
如果你使用"onkeypress"事件,那么你在开发(单元测试)时将不会受到任何用户限制。如果你有要求,不允许用户进入特定的限制后,看看这段代码,并尝试一次。
如果您正在寻找一种移动Web解决方案,希望用户看到数字键盘而不是全文键盘。使用类型=“电话”。它将与maxlength一起工作,这将节省您创建额外的javascript。
Max和Min仍然允许用户输入超过Max和Min的数字,这不是最佳的。
HTML输入
<input class="minutesInput" type="number" min="10" max="120" value="" />
jQuery
$(".minutesInput").on('keyup keypress blur change', function(e) {
if($(this).val() > 120){
$(this).val('120');
return false;
}
});
正如其他人所说,min/max与maxlength不同,因为人们仍然可以输入一个比您想要的最大字符串长度更大的浮点数。为了真正模拟maxlength属性,你可以在紧要关头做这样的事情(这相当于maxlength="16"):
<input type="number" oninput="if(value.length>16)value=value.slice(0,16)">