使用 pattern 属性限制输入
通过 pattern 属性结合正则表达式，可以限制输入框只能输入特定字符。例如，只允许输入字母和数字：
浏览器会在表单提交时验证输入是否符合正则规则，若不符合则显示 title 中的提示信息。
通过 JavaScript 动态过滤输入
监听 input 或 keypress 事件，实时检查输入的字符是否符合要求。以下示例仅允许输入数字和小写字母：
document.getElementById('customInput').addEventListener('input', function(e) {
this.value = this.value.replace(/[^a-z0-9]/g, '');
});replace(/[^a-z0-9]/g, '') 会移除所有非数字和小写字母的字符。
使用 onkeydown 阻止非法字符输入
通过拦截键盘事件，阻止用户输入非法字符。以下代码仅允许输入数字：
= 48 && event.keyCode此方法直接阻止非数字键的默认行为，但需注意兼容性（如复制粘贴操作可能绕过限制）。
使用 onchange 过滤非法字符输入
通过拦截键盘事件，阻止用户输入非法字符。以下代码仅允许输入数字：
使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应。
使用 onkeyup 过滤非法字符输入
通过拦截键盘事件，阻止用户输入非法字符。以下代码仅允许输入数字：
使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母。
使用 oninput 过滤非法字符输入
通过拦截键盘事件，阻止用户输入非法字符。以下代码仅允许输入数字：
使用 oninput 事件，完美的解决了以上两种问题，测试暂时还没有出现其它问题。
结合 CSS 提示非法输入
通过伪类 :invalid 为非法输入提供视觉反馈：
input:invalid {
border: 2px solid red;
}需搭配 pattern 属性使用，当输入不符合规则时自动触发样式。
注意事项
- 前端验证不可替代后端验证，需在服务端再次校验数据。
- 移动端输入法可能绕过
keydown限制，建议优先使用input事件过滤。 - 正则表达式需根据需求调整，例如
[A-Za-z]仅允许字母，[0-9.]允许数字和小数点。