KeyboardEvent：按下Shift键时如何正确获取数字键的对应编码

核心思路是使用 KeyboardEvent 接口原生提供的 code 属性做物理按键识别，该属性返回按键的物理位置标准编码，不受修饰键状态、系统键盘布局影响，完全可以解决你遇到的Shift兼容问题。

实现代码 #

@HostListener('document:keydown', ['$event'])
handleKeydownEvent(event: KeyboardEvent) {
  let index: number | null = null;

  // 匹配主键盘区的数字键
  if (event.code.startsWith('Digit')) {
    index = Number(event.code.slice(-1));
  }
  // 匹配数字小键盘区的数字键
  else if (event.code.startsWith('Numpad')) {
    index = Number(event.code.slice(-1));
  }

  // 校验是否为有效0-9下标
  if (index !== null && !isNaN(index) && index >= 0 && index <= 9) {
    // 可按需获取修饰键状态
    const modifierKeys = {
      shift: event.shiftKey,
      ctrl: event.ctrlKey,
      alt: event.altKey
    };
    // 执行对应业务逻辑
    doAction(index, modifierKeys);
  }
}

方案优势 #

• 无需维护多语言键盘布局映射表，全球各地不同键盘布局下都能正确识别物理数字键
• 不受修饰键影响，无论是否按下Shift/Ctrl/Alt，只要按下的是0-9对应的物理按键都能正确提取下标
• 保留了你原本实现的高可读性，逻辑清晰易懂

可选优化 #

如果不需要在输入框、文本域等可编辑元素中触发该按键逻辑，可以在校验下标前增加过滤逻辑，避免影响用户正常输入：

// 跳过可编辑元素的按键事件
const targetTag = (event.target as HTMLElement).tagName;
if (['INPUT', 'TEXTAREA'].includes(targetTag) || (event.target as HTMLElement).isContentEditable) {
  return;
}

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