input 设置只输入数字或其他自定义字符

使用 pattern 属性限制输入

通过 pattern 属性结合正则表达式，可以限制输入框只能输入特定字符。例如，只允许输入字母和数字：

<input type="text" pattern="[A-Za-z0-9]+" title="只能输入字母和数字">

浏览器会在表单提交时验证输入是否符合正则规则，若不符合则显示 title 中的提示信息。

---

通过 JavaScript 动态过滤输入

监听 input 或 keypress 事件，实时检查输入的字符是否符合要求。以下示例仅允许输入数字和小写字母：

<input type="text" id="customInput">
<script>
  document.getElementById('customInput').addEventListener('input', function(e) {
    this.value = this.value.replace(/[^a-z0-9]/g, '');
  });
</script>

replace(/[^a-z0-9]/g, '') 会移除所有非数字和小写字母的字符。

---

使用 onkeydown 阻止非法字符输入

通过拦截键盘事件，阻止用户输入非法字符。以下代码仅允许输入数字：

<input type="text" onkeydown="return event.keyCode >= 48 && event.keyCode <= 57">

此方法直接阻止非数字键的默认行为，但需注意兼容性（如复制粘贴操作可能绕过限制）。

---

使用 onchange 过滤非法字符输入

通过拦截键盘事件，阻止用户输入非法字符。以下代码仅允许输入数字：

<input type="text" onchange="this.value=this.value.replace(/\D|^0/g,'')">

使用 onchange 事件，在输入内容后，只有 input 丧失焦点时才会得到结果，并不能在输入时就做出响应。

---

使用 onkeyup 过滤非法字符输入

通过拦截键盘事件，阻止用户输入非法字符。以下代码仅允许输入数字：

<input type="text" onkeyup="this.value=this.value.replace(/\D|^0/g,'')">

使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母。

---

使用 oninput 过滤非法字符输入

通过拦截键盘事件，阻止用户输入非法字符。以下代码仅允许输入数字：

<input type="text" oninput="this.value=this.value.replace(/\D|^0/g,'')">

使用 oninput 事件，完美的解决了以上两种问题，测试暂时还没有出现其它问题。

---

结合 CSS 提示非法输入

通过伪类 :invalid 为非法输入提供视觉反馈：

input:invalid {
  border: 2px solid red;
}

需搭配 pattern 属性使用，当输入不符合规则时自动触发样式。

---

注意事项

• 前端验证不可替代后端验证，需在服务端再次校验数据。
• 移动端输入法可能绕过 keydown 限制，建议优先使用 input 事件过滤。
• 正则表达式需根据需求调整，例如 [A-Za-z] 仅允许字母，[0-9.] 允许数字和小数点。