JavaScript数字输入验证：连续按两次Dead键绕过验证问题求助

你的代码仅在keydown事件中拦截非数字键，但Dead键的特殊行为会绕过这个拦截——连续按下Dead键时，第二次按键生成的´字符可能不在keydown阶段的判断范围内，或是浏览器事件机制导致拦截失效。以下是两种可靠的解决方法：

方法一：使用input事件实时过滤（推荐） #

这种方法直接针对输入框的内容变化，无论输入方式是按键、粘贴还是输入法，都能确保仅保留数字：

input_numeric.addEventListener('input', function() {
  // 替换所有非数字字符为空
  this.value = this.value.replace(/[^0-9]/g, '');
});

方法二：改进keydown事件的判断逻辑 #

如果坚持使用按键事件，需要明确允许Dead键以外的必要控制键（如退格、方向键），同时直接拦截Dead键：

input_numeric.onkeydown = numericKeyboard;
function numericKeyboard(e) {
  // 允许数字键和常用控制键
  const allowedKeys = ['0','1','2','3','4','5','6','7','8','9', 'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
  // 拦截Dead键和不在允许列表内的按键
  if (e.key === 'Dead' || !allowedKeys.includes(e.key)) {
    e.preventDefault();
  }
}

原代码失效原因 #

原代码仅判断数字键，忽略了Dead键的key值为"Dead"，同时未考虑浏览器对Dead键组合字符的事件处理——部分场景下，Dead键生成的附加字符会在keydown之后的事件阶段才写入输入框，导致keydown的拦截无法生效。input事件则在内容实际变化时触发，能彻底规避这类问题。

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