Angular 6中使用快捷键聚焦可编辑元素的方法及可行代码示例

你遇到的accesskey不生效问题，大概率是因为不同浏览器对accesskey的触发组合键要求不一样——比如Chrome需要按Alt + S，Firefox则是Alt + Shift + S，Safari又是Ctrl + Alt + S，这种跨浏览器的差异很容易让你误以为功能没生效。如果想要更统一、可控的快捷键体验，用Angular的HostListener监听键盘事件会是更靠谱的方案。

下面是一个可行的代码示例：

组件TypeScript代码 #

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

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent {
  // 通过模板引用变量获取input元素的DOM引用
  @ViewChild('searchInput') searchInput!: ElementRef<HTMLInputElement>;

  // 监听全局键盘事件，这里设置的是Ctrl + S作为快捷键
  @HostListener('document:keydown.control.s', ['$event'])
  handleKeyboardShortcut(event: KeyboardEvent) {
    // 阻止浏览器默认的保存行为，避免冲突
    event.preventDefault();
    // 聚焦到目标输入框
    this.searchInput.nativeElement.focus();
  }
}

组件HTML模板 #

<!-- 用#searchInput定义模板引用变量，供TS代码获取元素 -->
<input #searchInput id="search_value" placeholder="请输入搜索内容">

自定义快捷键说明 #

• 如果想改用Alt + S作为触发键，只需把HostListener的事件改成document:keydown.alt.s
• 要是需要区分大小写（比如只响应大写S），可以加上.shift后缀，比如document:keydown.control.shift.s
• 如果只想让快捷键在当前组件范围内生效，去掉document:前缀即可，比如@HostListener('keydown.control.s', ['$event'])

如果你还是想尝试使用accesskey，记得根据你的浏览器按下正确的组合键：

• Chrome/Edge: Alt + 快捷键
• Firefox: Alt + Shift + 快捷键
• Safari: Ctrl + Alt + 快捷键

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