type=number 的maxlength和可以输入E的问题

本文探讨了如何在HTML输入框中限制用户输入1至999之间的数字,通过多种方法尝试,包括设置min和max属性,使用onkeypress事件,以及正则表达式过滤非数字字符,最终找到有效解决方案。

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

有一个输入框,要求只能输入1到999以下数字,于是

设置<input type="number" min="1" max="999">

结果发现可以输入e.因为e是一个常数。

使用网上的解决办法加入:

onkeypress='return( /[\d]/.test(String.fromCharCode(event.keyCode)))

这样解决了可以输入E的问题,但是这样输入框输入的数字可以大于999了。。
最后面采用以下方法解决:


<input type="number" min="1" max="9999" maxlength="4" oninput="value=value.replace(/e/g,'');if(value.length>4)value=value.slice(0,4)">

 

以上发现还是有问题,被全部替换了。最终,改成type="text",输入后用正则替换完所有非数字字符后,再取左4位

<input type="text" oninput="value=value.replace(/[^\d]/g,'');if(value.length>4)value=value.slice(0,4)">
或是
<input type="text" maxlength="4" oninput="value=value.replace(/[^\d]/g,'')">

转载于:https://www.cnblogs.com/zouzhongxing/p/9778457.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值