核心思路是监听input事件，用正则实时替换非法字符并赋值回value，同时需保存和恢复光标位置以避免跳脱；不能依赖keydown/keypress，因其无法拦截粘贴、拖入等操作。
在 input 事件中过滤非数字或特殊字符，核心思路是：**监听输入、获取当前值、校验并修正（或阻止）非法内容**。注意不能只依赖 keydown 或 keypress，因为它们无法覆盖粘贴、拖入、自动填充等场景；input 是最可靠的选择。
用正则 + value 替换实现实时过滤
在 input 事件中，对输入框的 value 做正则匹配，只保留允许的字符（如纯数字、带小数点/负号的数字等），然后重新赋值。关键点是：需保存光标位置，否则频繁重置 value 会导致光标跳到末尾。
- 允许整数和小数（含负号）：
/^-?\d*\.?\d*$/，但要注意连续小数点、多余负号等边界情况 - 更稳妥做法是「先删非法字符，再修复格式」：例如用
value.replace(/[^-\d.]/g, '')删掉所有非数字、非负号、非小数点字符，再用逻辑去重小数点和负号 - 示例代码片段：
inputEl.addEventListener('input', (e) => {
let { value } = e.target;
// 先移除非数字、非负号、非小数点字符
value = value.replace(/[^-\d.]/g, '');
// 确保最多一个负号（只能在开头）
if (value.indexOf('-') > 0) value = value.replace('-', '');
// 确保最多一个小数点
const dotIndex = value.indexOf('.');
if (dotIndex !== -1 && value.indexOf('.', dotIndex + 1) !== -1) {
value = value.slice(0, dotIndex) + value.slice(dotIndex).replace('.', '');
}
e.target.value = value;
});
结合 selectionStart / selectionEnd 保持光标位置
直接修改 value 会丢失光标位置，影响用户体验。应在替换前记录光标位置，替换后按需调整。
- 读取
e.target.selectionStart和selectionEnd - 替换 value 后，计算新光标位置（例如：若删除了光标前的字符，光标应左移对应位数）
- 简单策略：若只是末尾追加合法字符，可不干预；若发生截断或替换，建议将光标设回原位置或紧随有效内容末尾
区分需求场景，选择合适策略
不是所有场景都适合“强制过滤”。需根据业务判断：
立即学习“Java免费学习笔记（深入）”；
-
金额输入框：推荐“过滤+格式化”，如自动补零、限制小数位数（如
toFixed(2)），并配合失去焦点时二次校验 -
手机号/邮编等固定格式：可用
inputmode="numeric"+pattern辅助，再用input事件做兜底过滤 - 仅提示不拦截：可不修改 value，而是在旁边显示错误提示（如红边框、文字提示），把控制权留给用户，更适合宽松场景
避免常见陷阱
几个容易出错的地方要特别注意：
- 不要在
input中调用e.preventDefault()—— 它对input事件无效 - 避免无限循环：修改
value会再次触发input事件，务必加守卫（例如对比新旧值是否变化） - 移动端兼容性：部分安卓浏览器对
input触发时机有差异，建议加防抖或用setTimeout(..., 0)延迟处理 - 无障碍支持：过滤后应同步更新
aria-invalid或提供语音反馈，确保屏幕阅读器可感知
