在Angular中禁用下拉菜单的字母键选择功能

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

/**
 * @description
 * `DisableDropdownKeyboardDirective` 是一个 Angular 自定义指令，
 * 用于禁用下拉菜单中通过字母键进行选项选择的功能。
 * 它通过监听宿主元素的 'keydown' 事件，阻止可打印字符（字母）的默认行为和事件传播，
 * 但不影响方向键等导航键的功能。
 *
 * @selector '[appDisableDropdownKeyboard]'
 * @example
 * ```html
 * <p-dropdown appDisableDropdownKeyboard [options]="cities" [(ngModel)]="selectedCity"></p-dropdown>
 * ```
 */
@Directive({
  selector: '[appDisableDropdownKeyboard]',
})
export class DisableDropdownKeyboardDirective {
  constructor(private elementRef: ElementRef) {}

  /**
   * @description
   * `HostListener` 装饰器用于监听宿主元素上的 'keydown' 事件。
   * 当用户按下键盘时，此方法将被调用。
   *
   * @param event 触发的键盘事件对象。
   */
  @HostListener('keydown', ['$event'])
  onKeydown(event: KeyboardEvent) {
    // 阻止事件冒泡，防止父组件或更高层级的事件监听器接收到此事件
    // 这对于解决父组件也监听键盘事件的场景尤为重要
    event.stopPropagation();

    // 定义一个正则表达式，用于匹配所有大写或小写字母
    const printableCharacters = /[a-zA-Z]/;

    // 检查当前按下的键是否是字母
    if (printableCharacters.test(event.key)) {
      // 如果是字母键，则阻止其默认行为
      // 这将禁用下拉菜单根据字母键自动选择选项的功能
      event.preventDefault();
    }
    // 注意：此指令不会阻止方向键（上、下、左、右）、Enter、Escape 等非字母键的默认行为，
    // 以便保留正常的导航和交互功能。
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; // 如果使用ngModel，需要导入
import { DropdownModule } from 'primeng/dropdown'; // 如果使用p-dropdown，需要导入

import { AppComponent } from './app.component';
import { DisableDropdownKeyboardDirective } from './disable-dropdown-keyboard.directive'; // 导入您的指令

@NgModule({
  declarations: [
    AppComponent,
    DisableDropdownKeyboardDirective, // 在 declarations 数组中声明指令
  ],
  imports: [
    BrowserModule,
    FormsModule,
    DropdownModule, // 根据您的项目需求
    // ... 其他模块
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

<!-- 这是一个 PrimeNG 的下拉菜单组件 -->
<p-dropdown
  appDisableDropdownKeyboard        <!-- 将自定义指令添加到 p-dropdown 元素上 -->
  [options]="cities"                <!-- 绑定选项数据 -->
  [(ngModel)]="selectedCity2"       <!-- 双向绑定选中的值 -->
  editable="true"                   <!-- 如果需要，允许用户输入 -->
  optionLabel="name"                <!-- 显示选项的哪个属性 -->
  placeholder="选择一个城市"
></p-dropdown>

<!-- 对于原生 HTML select 元素，也可以同样应用 -->
<!-- <select appDisableDropdownKeyboard>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select> -->