当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题的方法:
- max和min
max和min是number输入框所支持的,这样如果我们要限制输入11位的手机号码,就可以用如下代码:
<input type="number" max="99999999999" />
- oninput事件
对多余的位数进行slice处理,进行删除;
但是这还是和maxlength的逻辑略有不同,那就是当我们将光标挪到之前输入的数字之间的时候,我们就会发现,再输入数字,会导致最后面的数字被删除。
<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />
- keydown
keydown事件可以帮助我们在按下数字之后,判断一下当前input中的value的位数,如果超过位数就return false,这样不管光标的位置在哪里,都不会输入新的数字。
<input type="number" onKeyDown="if(this.value.length==2) return false;" />
但是这会导致在满足2个数字的时候,再按删除键(或者说是所有按键)失效。
- *借助keypress,keydown和oninput
<input name="myInput_DRS" onkeypress="return isNumeric(event)" onkeydown="return isMoreThan(event)" oninput="maxLengthCheck(this)" type="number" placeholder="Type..." min="1" max="999" />
<script>
function maxLengthCheck(object) {
if (object.value.length > object.max.length)
object.value = object.value.slice(0, object.max.length)
}
function isNumeric(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();
}
}
function isMoreThan(evt) {
var theEvent = evt || window.event;
var target = theEvent.target;
var keyID = event.keyCode;
var isDelete = false;
switch (keyID) {
case 8:
isDelete = true;
// alert("backspace");
break;
case 46:
isDelete = true;
// alert("delete");
break;
default:
break;
}
if (!isDelete && target.value.length == target.max.length) {
return false;
}
}
</script>
- input parttern
<input type="text" pattern="\d*" maxlength="2">
但是兼容性不好,Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。
注意:Safari 或者 Internet Explorer 9 及之前的版本不支持 标签的 pattern 属性。
- input[type=tel]
在移动设备上,input[type=tel] 是支持maxlength的,而且只能输入数字键盘。
转:https://www.cnblogs.com/dahe1989/p/70 89895.html