React移动端OTG外接物理键盘Alt+数字键识别为Unidentified问题

问题背景 #

开发的打字应用支持按住Alt键输入数字（如033），通过映射表返回对应字符，该功能在Windows系统运行正常，但Android移动端通过OTG连接物理键盘时，按住Alt输入数字会触发event.key为Unidentified，导致功能失效。

原核心代码：

const [altCode, setAltCode] = useState("");

const handleKeyDown = (e) => {
      let altDupCode = altCode === undefined ? "" : altCode ;
      if (e.altKey && e.key !== "Alt") {
        altDupCode = altDupCode + e.key+"";
        setAltCode(altDupCode);
      } else {
        altDupCode = "";
        setAltCode("");
      }
      e.altKey &&
        changeKrutidev055Shortcut(
          altDupCode,
          e,
          setAltCode,
          setActualInputValue,
          setTotalKeystroke
        );
    }
  };

解决方案 #

问题根源是Android系统对物理键盘Alt组合键的事件映射和Windows不同，e.key无法正确返回数字字符，需改用更兼容的按键标识方式，同时优化状态更新逻辑：

1. 替换按键值获取方式 #

优先使用e.code（语义化按键标识），降级到e.keyCode（兼容性更好）来提取数字，覆盖普通数字键和小键盘数字键的场景。

2. 使用useState函数式更新 #

避免异步更新导致的状态滞后问题，确保每次拼接的是最新的altCode值。

3. 阻止默认事件 #

避免Android系统对Alt键的默认处理干扰事件捕获。

修改后的代码：

const [altCode, setAltCode] = useState("");

const handleKeyDown = (e) => {
  e.preventDefault();
  
  let keyValue = "";
  // 处理普通数字键（Digit0-Digit9）
  if (e.code.startsWith("Digit")) {
    keyValue = e.code.slice(-1);
  }
  // 处理主键盘数字键的keyCode（48-57对应0-9）
  else if (e.keyCode >= 48 && e.keyCode <= 57) {
    keyValue = String.fromCharCode(e.keyCode);
  }
  // 处理小键盘数字键的keyCode（96-105对应0-9）
  else if (e.keyCode >= 96 && e.keyCode <= 105) {
    keyValue = String.fromCharCode(e.keyCode - 48);
  }

  if (e.altKey && keyValue) {
    // 函数式更新获取最新状态，确保映射函数用最新的altCode
    setAltCode(prev => {
      const newCode = prev + keyValue;
      changeKrutidev055Shortcut(
        newCode,
        e,
        setAltCode,
        setActualInputValue,
        setTotalKeystroke
      );
      return newCode;
    });
  } else {
    setAltCode("");
  }
};

补充说明 #

• e.code是W3C标准的按键标识，比如数字0对应Digit0，不受输入法或系统布局影响，优先使用。
• keyCode虽已被标准标记为废弃，但在Android移动端浏览器中兼容性依然良好，作为降级方案覆盖更多设备。
• 函数式更新内部调用映射函数，确保传入的是最新的altCode值，避免异步状态更新导致的参数错误。

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