JavaScript数字输入校验在桌面端正常但移动端浏览器失效问题咨询

原实现失效原因 #

原代码完全依赖keydown、keypress事件做非法字符拦截，在移动端环境下存在天然适配缺陷，直接导致校验失效：

• 移动端软键盘、第三方输入法、联想输入/语音输入场景下，往往不会完整触发标准keydown/keypress事件，部分场景下事件返回的按键值和实际输入字符不匹配，自然无法完成拦截
• 粘贴、拖拽填入内容的操作，完全不会触发上述两个键盘事件，仅靠事件拦截无法覆盖这类输入路径
• 原正则校验未排除退格、方向键等功能控制按键，实际使用中这类正常操作也会被误拦截

修复方案 #

采用「桌面端事件即时拦截 + 全端输入值清洗兜底」的双逻辑方案，同时兼顾桌面端操作体验和移动端多输入场景的校验要求：

• 保留桌面端的keydown拦截逻辑，对物理键盘输入做即时拦截，减少输入延迟
• 新增input事件监听作为全端兜底，无论通过什么方式触发输入框内容变更，都统一清洗非法字符
• 补充光标位置适配逻辑，避免自动清洗时出现光标跳回开头的体验问题

修复后的可直接运行代码如下：

$(document).ready(function () {
    const $input = document.querySelector("#phMidPane_ctl04_txtID");
    // 匹配所有非法字符（非数字、非斜杠）
    const ILLEGAL_CHARS_REGEXP = /[^0-9\/]/g;
    // 允许正常触发的功能控制按键，避免误拦截
    const ALLOWED_CONTROL_KEYS = ['Backspace', 'Tab', 'ArrowLeft', 'ArrowRight', 'Delete'];

    // 桌面端即时拦截逻辑
    $input.addEventListener("keydown", event => {
      if (!ALLOWED_CONTROL_KEYS.includes(event.key) && !/^[0-9\/]$/.test(event.key)) {
        event.preventDefault();
      }
    });

    // 全端兜底校验逻辑（覆盖移动端、粘贴输入等场景）
    $input.addEventListener("input", (e) => {
      const inputEl = e.target;
      const currentCaretPos = inputEl.selectionStart;
      const originalContent = inputEl.value;
      // 移除所有非法字符
      const cleanedContent = originalContent.replace(ILLEGAL_CHARS_REGEXP, '');
      // 仅当内容有变化时才更新输入框，避免重复触发事件造成死循环
      if (originalContent !== cleanedContent) {
        inputEl.value = cleanedContent;
        // 修正清洗后的光标位置，保证输入流畅
        const removedCharCount = originalContent.length - cleanedContent.length;
        inputEl.setSelectionRange(currentCaretPos - removedCharCount, currentCaretPos - removedCharCount);
      }
    });
  });

方案效果 #

• 桌面端体验和原实现的即时拦截效果保持一致，且修复了原逻辑误拦截功能按键的问题
• 移动端无论通过软键盘按键、联想输入、语音输入、粘贴内容，都能完全过滤掉数字、斜杠之外的非法字符，不会出现校验失效的问题
• 自动清洗过程不会打断用户输入流程，光标位置正常跟随，无体验卡顿

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