Angular下拉列表打开时触发键盘事件的实现方案咨询

• 需求：下拉菜单打开时，按下Delete键需将索引重置为-1
• 异常现象：下拉菜单处于打开状态时，按下Delete键，keydown/keyup事件未触发
• 复现步骤：
  1. 点击下拉列表，选择任意选项
  2. 再次点击下拉列表打开菜单，按下Delete键
  3. keydown/keyup事件无响应
• 期望效果：下拉菜单打开时，按下Delete键能触发keydown事件，同时将索引重置为-1

方案1：全局键盘事件监听+菜单状态判断 #

通过Angular的@HostListener监听全局键盘事件，结合菜单的打开状态，仅在菜单开启时处理Delete键逻辑：

组件代码：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  selectedIndex = -1;
  isDropdownOpen = false;

  @HostListener('document:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent) {
    if (this.isDropdownOpen && event.key === 'Delete') {
      event.preventDefault();
      this.selectedIndex = -1;
    }
  }

  toggleDropdown() {
    this.isDropdownOpen = !this.isDropdownOpen;
  }

  selectOption(index: number) {
    this.selectedIndex = index;
    this.isDropdownOpen = false;
  }
}

模板代码：

<div class="dropdown">
  <button (click)="toggleDropdown()">
    {{ selectedIndex === -1 ? '选择选项' : `选项 ${selectedIndex + 1}` }}
  </button>
  <ul *ngIf="isDropdownOpen" class="dropdown-menu">
    <li (click)="selectOption(0)">选项1</li>
    <li (click)="selectOption(1)">选项2</li>
    <li (click)="selectOption(2)">选项3</li>
  </ul>
</div>

方案2：下拉菜单容器绑定键盘事件 #

给下拉菜单容器添加键盘事件监听，同时确保容器可获取焦点，避免全局监听的范围过大：

模板代码：

<div class="dropdown">
  <button (click)="toggleDropdown()">
    {{ selectedIndex === -1 ? '选择选项' : `选项 ${selectedIndex + 1}` }}
  </button>
  <ul 
    *ngIf="isDropdownOpen" 
    class="dropdown-menu"
    (keydown)="handleDropdownKeydown($event)"
    tabindex="0"
  >
    <li (click)="selectOption(0)">选项1</li>
    <li (click)="selectOption(1)">选项2</li>
    <li (click)="selectOption(2)">选项3</li>
  </ul>
</div>

组件补充代码：

handleDropdownKeydown(event: KeyboardEvent) {
  if (event.key === 'Delete') {
    event.preventDefault();
    this.selectedIndex = -1;
  }
}

toggleDropdown() {
  this.isDropdownOpen = !this.isDropdownOpen;
  // 菜单打开后主动让容器获取焦点，确保能捕获键盘事件
  setTimeout(() => {
    const menuEl = document.querySelector('.dropdown-menu') as HTMLElement;
    menuEl?.focus();
  }, 0);
}

注意事项 #

• 全局监听方案无需关注元素焦点，适合页面内全局响应键盘操作的场景
• 容器绑定方案更精准，仅当菜单容器处于焦点状态时响应事件，需要通过tabindex让容器具备可聚焦属性

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