如何在Angular中捕获Tab + Escape组合键？

为什么你的代码无法捕获Tab+Esc #

你的判断逻辑存在错误：一次keydown事件仅对应单个按键，无法同时满足event.key === 'Tab'且event.code === 'Escape'。此外，Tab属于系统优先级较高的特殊按键，按下时浏览器/系统会优先处理焦点切换行为，这会直接干扰组合键的捕获流程，甚至导致Esc的事件无法正常触发。

尝试修复Tab+Esc捕获逻辑（兼容性有限） #

如果一定要尝试实现Tab+Esc组合，可以通过记录Tab的按下状态，结合Esc的触发事件来实现，但需要注意这种方式会破坏Tab的默认交互行为：

private isTabPressed = false;

@HostListener('window:keydown', ['$event'])
async onKeyDown($event: KeyboardEvent) {
  // 记录Tab按下状态并阻止默认焦点切换
  if ($event.key === 'Tab') {
    this.isTabPressed = true;
    $event.preventDefault();
  }
  // 检测Tab已按下且触发Esc时执行逻辑
  if (this.isTabPressed && $event.key === 'Escape') {
    console.log('Tab + Escape keys pressed');
    this.isTabPressed = false;
  }
}

@HostListener('window:keyup', ['$event'])
onKeyUp($event: KeyboardEvent) {
  // 松开Tab时重置状态
  if ($event.key === 'Tab') {
    this.isTabPressed = false;
  }
}

⚠️ 注意：该方案在不同浏览器、系统中的兼容性不稳定，且会影响页面的正常焦点交互，不推荐在生产环境使用。

推荐未被系统占用的Esc组合键 #

考虑到Tab+Esc的兼容性问题，更推荐以下几个在Windows、Ubuntu、Mac中均无系统默认绑定的Esc组合：

• Ctrl + Shift + Escape：Windows中单独Ctrl+Esc是打开开始菜单，但加上Shift后无系统默认功能；Ubuntu和Mac也无默认占用
• Alt + Shift + Escape：三大系统均无系统级默认绑定
• Meta + Shift + Escape：Windows对应Win键、Mac对应Command键、Ubuntu对应Super键，该组合无系统默认功能

以Ctrl + Shift + Escape为例，捕获逻辑更简洁稳定：

@HostListener('window:keydown', ['$event'])
async onKeyDown($event: KeyboardEvent) {
  if ($event.ctrlKey && $event.shiftKey && $event.key === 'Escape') {
    console.log('Ctrl + Shift + Escape pressed');
    $event.preventDefault(); // 可选，阻止潜在的冲突行为
  }
}

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