基于正则表达式限制文本框按键输入：非字符输入兼容问题

嘿，这个问题我之前做表单输入限制时也踩过坑！靠预判输入字符来生成最终内容的思路，确实会在退格、删除、箭头导航这些非字符操作上直接失效——毕竟这些操作根本不会新增字符，反而会修改已有内容，预判逻辑完全摸不准。

给你几个不用逐一判断特殊字符的靠谱方案：

1. 直接校验文本框的最终值（最推荐） #

放弃预判，改用input事件来处理——这个事件是在文本框内容已经更新完成后触发的，不管用户是输入字符、按退格、粘贴内容甚至是拖拽文本进来，你都能拿到最新的完整值。然后用正则校验这个值，如果不符合规则，就恢复到上一次的有效值。

举个限制只能输入数字（最多两位小数）的例子：

// 保存上一次的有效内容
let lastValidValue = '';
const inputBox = document.getElementById('your-input-id');

inputBox.addEventListener('input', function(e) {
  const currentValue = e.target.value;
  // 这里替换成你的正则规则，示例为允许数字和最多两位小数
  const regex = /^\d*(\.\d{0,2})?$/;
  
  if (regex.test(currentValue)) {
    // 符合规则，更新有效内容记录
    lastValidValue = currentValue;
  } else {
    // 不符合，回滚到上一次的有效值
    e.target.value = lastValidValue;
  }
});

这种方法完全不用管用户做了什么操作，只看最终结果，完美避开所有特殊按键的判断，而且能覆盖粘贴、拖拽等所有输入场景。

2. 用HTML5的pattern属性（适合简单场景） #

如果你的规则比较简单，直接给input标签加pattern属性，浏览器会自动帮你做校验，甚至自带错误提示（不过这是提交时的校验，要实时限制的话还是结合上面的input事件更稳妥）：

<input type="text" pattern="^\d*$" title="请输入数字" required>

优点是零JS代码，缺点是没法实时拦截不符合规则的输入，只能在提交时提示。

3. 避开keydown/keyup这类按键拦截方案 #

之前很多人喜欢用keydown事件拦截按键，但这种方式漏洞太多：不同键盘的键码不一致、没法处理粘贴/拖拽、甚至连输入法的候选词都拦不住，完全不推荐。

总结下来，第一种方法是最通用、最省心的，不管什么输入操作都能搞定，不用再头疼那些特殊字符的判断啦！

内容的提问来源于stack exchange，提问作者Alex