点击波浪键(~)聚焦Angular Material输入框的技术实现问询

这很容易实现，咱们一步步来完成这个需求：

步骤1：创建自定义指令 keyboard.directive.ts #

这里提供两种实现方案，你可以根据场景选择：

方案A：全局监听+DOM查找（适合全局生效场景） #

这种方式不需要大幅修改组件模板，只需要给输入框加个唯一标识来精准定位：

import { Directive, HostListener, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Directive({
  selector: '[appWaveKeyFocus]', // 自定义指令选择器，可按需修改
  standalone: true // Angular 14+ 独立组件/指令可添加此配置
})
export class KeyboardDirective {
  constructor(@Inject(DOCUMENT) private document: Document) {}

  // 监听全局键盘按下事件
  @HostListener('document:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent): void {
    // 兼容不同键盘布局，波浪键的key值可能是`或~
    if (event.key === '`' || event.key === '~') {
      event.preventDefault(); // 阻止默认行为，避免输入波浪符到输入框
      
      // 通过id查找目标输入框（需先给input加对应id）
      const targetInput = this.document.getElementById('place-autocomplete-input') as HTMLInputElement;
      
      if (targetInput) {
        targetInput.focus();
        // 可选：聚焦后自动选中文本，打开下方注释即可
        // targetInput.select();
      }
    }
  }
}

方案B：组件内模板引用变量（更符合Angular组件化思想） #

这种方式将指令附着在包含输入框的容器上，通过@ViewChild直接获取输入框引用，避免全局DOM查找：

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

@Directive({
  selector: '[appWaveKeyFocus]',
  standalone: true
})
export class KeyboardDirective {
  // 通过模板引用变量获取输入框，变量名需和组件内的#placeAutocompleteInput一致
  @ViewChild('placeAutocompleteInput') private targetInput!: ElementRef<HTMLInputElement>;

  @HostListener('document:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent): void {
    if (event.key === '`' || event.key === '~') {
      event.preventDefault();
      
      if (this.targetInput?.nativeElement) {
        this.targetInput.nativeElement.focus();
      }
    }
  }
}

步骤2：修改组件模板 #

• 若使用方案A：给输入框添加唯一id：

<input 
  #placeAutocompleteInput 
  id="place-autocomplete-input" <!-- 新增唯一id -->
  style="max-width:100%;" 
  [placeholder]="placeholderText" 
  [matChipInputFor]="chipListPlaces" 
  [formControl]="mainSearchCtrl" 
  [matAutocomplete]="mainAutocomplete" 
  (keyup.enter)="onEnter($event)"
/>

• 若使用方案B：将指令应用在包含输入框的容器或组件根元素上：

<div appWaveKeyFocus>
  <!-- 输入框需放在此容器内 -->
  <input 
    #placeAutocompleteInput 
    style="max-width:100%;" 
    [placeholder]="placeholderText" 
    [matChipInputFor]="chipListPlaces" 
    [formControl]="mainSearchCtrl" 
    [matAutocomplete]="mainAutocomplete" 
    (keyup.enter)="onEnter($event)"
  />
</div>

步骤3：注册指令 #

如果你的指令未设置standalone: true，需要在对应NgModule中声明：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KeyboardDirective } from './keyboard.directive';
// 导入你的组件及Angular Material相关模块

@NgModule({
  declarations: [
    // ...你的组件
    KeyboardDirective
  ],
  imports: [
    BrowserModule,
    // 请确保导入MatAutocompleteModule、MatChipsModule等依赖模块
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

注意事项 #

• 使用keydown而非keyup是为了提前阻止默认行为，避免波浪符被输入到输入框中。
• 若应用内存在多个类似输入框，需确保目标输入框的id唯一，或调整选择器精准定位。

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