如何让HTML5数字输入仅接受整数?
共 3227字,需浏览 7分钟
·
2021-04-13 17:05
问题 1,不好的脚本
解决办法
问题 2,正则表达式模式错误或不完整
解决办法?
问题 3,在标记中使用事件属性
解决办法
问题 4,必须对每个输入进行硬编码
解决办法
问题 5,一些脚本阻止使用导航控制和正常编辑!
解决办法
HTML:
<input type="number" step="1" pattern="^[-/d]/d*$" />
只接受整数,如果你想只接受正数,可以换成 pattern="/d+”
JavaScript:
然后我们可以使用 JavaScript 来限制用户的输入,这样人们甚至不允许输入无效值。
(function() {
var integers = document.querySelectorAll(
'input[type="number"][step="1"]'
),
intRx = /\d/;
for (var input of integers) {
input.addEventListener("keydown", integerChange, false);
}
function integerChange(event) {
if (
event.key.length > 1 ||
(event.key === "-" &&
event.currentTarget.value.length === 0) ||
intRx.test(event.key)
)
return;
event.preventDefault();
}
})();
我们首先将其包装在 IIFE 中以隔离范围。然后,抓取我们要在页面上挂接的所有输入,并创建我们的正则表达式。
我在事件开始处而不是在事件内部创建正则表达式,这样我们就不用浪费时间在每个该死的按键上创建它。
这就是匿名函数可能带来开销的地方,也是需要告诉那些“函数式程序员”和他们的“副作用”废话的地方。
循环遍历所有输入,并为它们分配事件处理程序。
上述处理程序只是检查我们的返回情况。像箭头、退格键、回车键等控制键都会返回完整的文字来描述它们,所以如果 event.key 的长度>1,我们就不要阻止这些。
如果它是一个负号和第一个字符,通过 return 允许它。
如果它是一个数字,通过 return 允许它。
如果都不是,请阻止该事件。
Live Demo
这是一个代码本,它包括几个文本字段和多个整数和非整数的数字字段,所以你可以看到它确实只钩住了我们想要的字段。https://codepen.io/jason-knight/pen/QWGyrwq
悬而未决的问题
我可能会考虑添加的一件事是挂钩“change”事件来拦截粘贴,但由于“pattern”属性不允许提交无效的值,所以应该没有问题。
结论
多想想用户可能会输入错误的东西,以及如何处理,但也要记住用户可能输入的所有其他东西,而这些东西与值本身没有关系。
请始终注意,许多用户会主动阻止脚本编写,或者出于安全或可访问性的原因让脚本在 UA 中不可用。增强而不是取代你的基本功能!
计划将这些东西应用到所有这些字段,而不是从一开始就只使用单个元素。
留意低效率,例如如何多次生成用作回调的匿名函数……或如何将脚本放入标记中会错失跨页面或重新访问的缓存机会。
做了这些事情之后,实现这样简单的功能就不会再来困扰您或惹恼用户了。
学习更多技能
请点击下方公众号