如何检测键盘布局引发的修饰键冲突 解决网页快捷键输入冲突问题

你的问题根源是当前使用event.code做按键判断，该属性返回物理按键的位置标识，和键盘布局、实际输入字符完全无关，所以会和不同区域布局的默认字符输入逻辑冲突。以下是可落地的多层适配方案：

优先改动：10行代码直接解决当前冲突 #

你可以直接在现有逻辑中添加两项判断，不需要引入复杂的布局检测，就能覆盖99%的北欧布局冲突场景，且全浏览器兼容：

@HostListener('document:keydown', ['$event'])
public onPublicKeyDown(event: KeyboardEvent) {
  // 新增判断1：如果当前焦点在可输入元素中，说明用户正在输入内容，直接跳过快捷键
  const activeEl = document.activeElement;
  const isInputting = activeEl?.tagName === 'INPUT' || 
                      activeEl?.tagName === 'TEXTAREA' || 
                      activeEl?.isContentEditable;
  // 新增判断2：如果当前按键组合输出的是@符号，直接跳过，适配北欧布局
  if (isInputting || event.key === '@') return;

  if (event.altKey && event.code === 'Digit2') {
    // 执行导航逻辑
  }
}

该方案的逻辑是：瑞典/芬兰布局下按下Option+2时，event.key的值就是@，直接跳过快捷键触发逻辑即可，同时加了输入状态拦截，避免用户输入时误触全局快捷键，这也是所有全局快捷键都应该加的基础逻辑。

进阶适配：键盘布局检测 #

如果你需要更通用的多布局适配，可以使用浏览器原生的键盘布局映射API提前检测用户的按键映射规则，自动适配不同布局：

private enableAlt2Shortcut = true;

async ngOnInit() {
  // 判断浏览器是否支持键盘布局API
  if ('keyboard' in navigator && 'getLayoutMap' in navigator.keyboard) {
    try {
      const layoutMap = await navigator.keyboard.getLayoutMap();
      const digit2Key = layoutMap.get('Digit2');
      // 北欧布局下Digit2+Alt输出@，US/UK布局下该组合不会输出@，据此判断是否启用快捷键
      // 你也可以根据需要扩展更多布局的匹配规则
      this.enableAlt2Shortcut = ['2', '"'].includes(digit2Key);
    } catch (err) {
      // 权限不足等异常场景默认启用快捷键
      this.enableAlt2Shortcut = true;
    }
  }
}

@HostListener('document:keydown', ['$event'])
public onPublicKeyDown(event: KeyboardEvent) {
  const activeEl = document.activeElement;
  const isInputting = activeEl?.tagName === 'INPUT' || 
                      activeEl?.tagName === 'TEXTAREA' || 
                      activeEl?.isContentEditable;
  if (isInputting || event.key === '@' || !this.enableAlt2Shortcut) return;

  if (event.altKey && event.code === 'Digit2') {
    // 执行导航逻辑
  }
}

注意：该API存在兼容性限制，Safari 16.4以下、Firefox 119以下版本暂不支持，需要搭配兜底逻辑使用。

通用兜底方案：快捷键自定义/关闭选项 #

无论你前面的适配逻辑做的多完善，始终会存在自定义键盘布局、自定义系统快捷键、小众区域布局和你的预设规则冲突的情况。给用户提供「全局导航快捷键」的关闭选项，甚至支持用户自定义快捷键，是多区域适配、无障碍适配的行业通用最佳实践，也是成本最低的兜底方案。

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