文本输入框仅允许数字输入：旧方案失效求更新实现方案

你提到的早年方案在当前浏览器环境下失效很正常——早期代码依赖的keyCode/which属性已被废弃，且仅监听keydown事件没法覆盖粘贴、拖拽输入等场景。结合你的需求（限制输入0-9数字，输入前两位后自动加冒号），这里整理了适配现代浏览器的实现方案：

现有代码的核心问题 #

• 依赖已被标准废弃的keyCode/which属性，现代浏览器更推荐使用event.key
• keydown事件中修改输入框值的时机错误：此时输入的字符还未加入到value中，会导致逻辑混乱
• 未处理粘贴、右键菜单粘贴等非键盘输入场景，这些操作会直接绕过keydown的限制

优化后的实现代码 #

<input id="text_input" type="text" name="hours" maxlength="5">

const input = document.getElementById("text_input");

// 处理所有输入场景（键盘、粘贴、拖拽等）
input.addEventListener("input", (e) => {
  // 第一步：过滤所有非数字字符
  let cleanValue = e.target.value.replace(/[^0-9]/g, "");
  
  // 第二步：自动添加冒号，仅在前两位后插入，最多保留4位数字+1个冒号（比如HH:mm格式）
  if (cleanValue.length > 2) {
    cleanValue = `${cleanValue.slice(0, 2)}:${cleanValue.slice(2, 4)}`;
  }
  
  e.target.value = cleanValue;
});

// 辅助拦截无效按键，提升输入体验
input.addEventListener("keydown", (e) => {
  const allowedKeys = ["0","1","2","3","4","5","6","7","8","9","Backspace","Delete","ArrowLeft","ArrowRight","Tab"];
  if (!allowedKeys.includes(e.key)) {
    e.preventDefault();
  }
});

方案说明 #

• input事件：覆盖所有输入场景，先过滤非数字字符再格式化，确保输入格式始终合规
• keydown事件：作为辅助拦截无效按键，避免用户输入无效字符时的反馈延迟
• maxlength属性：限制输入框最多5位字符（对应HH:mm的格式长度），避免多余输入

内容的提问来源于stack exchange，提问作者Juan-man