php input 不能输入数字,限制input[type=number]的输入位数策略整理

本文探讨了在type为number的输入框中限制位数的挑战,介绍了max/min配合、oninput事件处理、keydown事件检查、pattern属性和input[type=tel]等方法,并展示了实例。了解这些技巧,避免 maxlength 的局限,提高用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

[导读]当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题的方法。

当我们使用类型number的input输入框的时候,我们可能需要限制输入的位数,这个时候通常会想到maxlength,但是maxlength是在number类型的时候是不支持的,下面是一些解决这种问题的方法。

1)max和min

max和min是number输入框所支持的,这样如果我们要限制输入11位的手机号码,就可以用如下代码

这样不会限制用户输入,但会在用户提交的时候提示。

[示例] https://jsfiddle.net/dahe/cyatq4aw/

2)oninput事件

对多余的位数进行slice处理,进行删除myInput.oninput = function () {

if (this.value.length > 4) {

this.value = this.value.slice(0,4);

}

}

但是这还是和maxlength的逻辑略有不同,那就是当我们将光标挪到之前输入的数字之间的时候,我们就会发现,再输入数字,会导致最后面的数字被删除。

[示例] https://jsfiddle.net/dahe/893q05jr/

3)keydown

keydown事件可以帮助我们在按下数字之后,判断一下当前input中的value的位数,如果超过位数就return false,这样不管光标的位置在哪里,都不会输入新的数字。

但是这会导致在满足2个数字的时候,再按删除键(或者说是所有按键)失效。╮(╯﹏╰)╭真的尴尬了

[示例] https://jsfiddle.net/dahe/haLLu33L/

4)借助keypress,keydown和oninput

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;

}

}

[示例] https://jsfiddle.net/dahe/g3e686qx/

5)input parttern

但是兼容性不好,Internet Explorer 10、Firefox、Opera 和 Chrome 支持 pattern 属性。

注意:Safari 或者 Internet Explorer 9 及之前的版本不支持 标签的 pattern 属性。

[示例] https://jsfiddle.net/dahe/k9ta81ta/

6)input[type=tel]

在移动设备上,input[type=tel] 是支持maxlength的,而且只能输入数字键盘。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值