如何准确实现仅允许数字输入的JavaScript验证

JavaScript表单校验中，死键导致的非法字符输入问题常被忽视。本文将详细解析两种高效解决方案，助开发者实现精准输入控制。

表单开发过程中，数字输入校验是常见需求。然而单纯依赖keydown事件存在致命缺陷：重音符等死键首次按下时e.key可能返回'Dead'，导致校验失效。这种机制下，非法字符往往在组合输出后才被发现，传统逐个比对数字的方法对此束手无策。

✅ 核心方案：input事件结合正则清洗

input事件在值变更后触发，能完美规避死键时机问题。通过实时正则替换，可确保输入框始终保持合法内容：

const inputNumeric = document.getElementById("numeric");
const illegalChars = /[^0-9.-+]/g;
inputNumeric.addEventListener("input", function (e) {
  e.target.value = e.target.value.replace(illegalChars, "");
});

关键注意事项

1. 小数校验需额外逻辑确保单小数点，如使用^(?=.*d)[d+-]*(?:.d*)?$
2. 负数校验建议限制负号位置，例如^-?d+.?d*$
3. 避免混用type="number"，因其移动端行为不一致且允许科学计数法

? 备选方案：keydown与paste双事件拦截

需要实时阻止非法输入时，可组合两个事件：

const checkInput = (e, isPaste) => {
  const text = isPaste 
    ? (e.clipboardData || window.clipboardData)?.getData("Text") || ""
    : e.key;
  if (/[^0-9]/.test(text)) e.preventDefault();
};
numericField.addEventListener("paste", e => checkInput(e, true));
numericField.addEventListener("keydown", e => checkInput(e, false));

input事件方案因其全面性应作为首选，特殊场景可辅以双事件拦截。无论采用哪种方案，都应结合HTML5 pattern属性与后端校验，构建多层次的输入防护体系。