—— 分享前端技术,记录生活点滴

Input限制输入纯数字并限制最值

  最近拿到一个优化任务,要求产品购买数量可以自定义,当时一脸懵逼,不能自定义,难道每次只能买1个吗?

  我打开前人代码,才明白其良苦用心。他考虑到了输入校验,老代码使用 H5 + jQuery,也没用到什么 UI 框架,自然没有框架带来的校验功能。他将原生的 input 置为disabled,旁边放加减号,每次加减1,以此避免用户输入汉字英文甚至是进行 xss。但这样一来,如果用户想要购买100个产品呢?点击99次吗?

  回到正题,我首先将disabled置为false,测试一下。不同平台差异明显,PC 端(Chrome@75+)限制了数字输入,但可以输入 e,并且不校验空值,空值可以理解,为什么字母偏偏是 e 呢?原因是 e 在数学上代表自然对数的底数,是一个无限不循环小数,其值是2.71828…,所以在输入 e 时,输入框认为是数字。此外,设置minmax属性,也只作用于点击 input 自带箭头的情况,直接输入任何数字都是可以的。在 iOS 端(iOS 12+),type='number'属性完全失效,任何值都可以输入。看来正是因为如此,前人才索性设置disabled。那么我如何做呢?代码如下:

1
<input type="number" min="1" max="100" value="1" id="product-counts" />
1
2
3
4
5
6
7
8
9
10
11
12
var num = 1, curNum = 0;
$('#product-counts').on('input', function() {
curNum = Number($(this).val());
if (!/[\d]/.test(curNum)) {
$(this).val(num || 1);
} else {
num = Number($(this).val());
$(this).val(curNum > 100 ? 100 : (curNum*1));
}
}).on('blur', function() {
$(this).val(curNum || 1);
})

  思路很简单,我们看到每次触发 input 事件时对 input 值进行数字校验,如果是数字则将其保存到变量,下次更改后,如果输入的不是数字,则将 input 值替换为上次保存在变量里的值,变量里没有值则置为1,失去焦点时候再去判断,如果值为0,则置为1。

  以上便是本次分享的内容,希望对你有所帮助,感谢关注阿晋的网络日志。

支付宝打赏 微信打赏

如果觉得我的文章对您有用,请随意赞赏 :)