表单文本框的使用(二) 输入过滤(合成事件)
输入过滤
屏蔽字符
情景：输入框需要限制出现的字符，比如只能是数字。
输入框本身是没有这个功能的，但是我们可以通过JavaScript来实现。 我们能实现向输入框中输入字符，依靠的是键盘事件，所以可以通过添加键盘事件，然后根据事件对象的信息来判断符不符合条件，不符合条件，就通过event.preventDefault阻止默认事件，即阻止输入。
<body><div class="input-box"><input type="text" size="10" maxlength="10"></div><script> const ipt = document.getElementsByTagName('input')[0]ipt.addEventListener('keypress', (e) => {console.log(e.key)if (!/^\d/.test(e.key)) {e.preventDefault()}}) </script>
</body>
上面我们添加的键盘事件是keypress，因为keyup是键盘抬起事件，这个时候已经输入到输入框里了，没有作用；而keydown会识别功能键，所以使用时还得考虑让功能键通过，不然就没法删除输入的内容了。另外，keypress支持区分大小写。
最低0.47元/天 解锁文章
4870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
