对于<input type="number">元素,maxlength无效。如何限制该数字元素的最大长度?
当前回答
如果您正在寻找一种移动Web解决方案,希望用户看到数字键盘而不是全文键盘。使用类型=“电话”。它将与maxlength一起工作,这将节省您创建额外的javascript。
Max和Min仍然允许用户输入超过Max和Min的数字,这不是最佳的。
其他回答
因为我正在寻找验证,只允许整数,我采取了一个现有的答案,并改进它
其思想是从1到12验证,如果输入小于1,它将被设置为1,如果输入高于12,它将被设置为12。不允许使用十进制符号。
<input id="horaReserva" type="number" min="1" max="12" onkeypress="return isIntegerInput(event)" oninput="maxLengthCheck(this)">
function maxLengthCheck(object) {
if (object.value.trim() == "") {
}
else if (parseInt(object.value) > parseInt(object.max)) {
object.value = object.max ;
}
else if (parseInt(object.value) < parseInt(object.min)) {
object.value = object.min ;
}
}
function isIntegerInput (evt) {
var theEvent = evt || window.event;
var key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode (key);
var regex = /[0-9]/;
if ( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) {
theEvent.preventDefault();
}
}
}
这很简单,用一些javascript你可以模拟一个maxlength,看看:
//maxlength="2"
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
梅考·莫拉的回答是一个好的开始。 然而,他的解决方案意味着当您输入第二个数字时,所有字段的编辑都会停止。因此,您不能更改值或删除任何字符。
下面的代码停在2,但允许继续编辑;
//MaxLength 2
onKeyDown="if(this.value.length==2) this.value = this.value.slice(0, - 1);"
您可以指定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);
}
}
对于有长度限制的数字输入,您也可以尝试这种方法
<input type="tel" maxlength="3" />