时间戳

首页 > 解决方案 > 使用快捷键在angular6中聚焦可编辑项目的方法是什么？

javascript - 使用快捷键在angular6中聚焦可编辑项目的方法是什么？

问题描述

我尝试在 Angular 6 中使用 accesskey。但它似乎不起作用。

组件 html 模板片段： <input id="search_value" accesskey="S">

任何人都可以在Angular 6中提供工作代码示例。提前致谢

标签： javascripthtmlangularbrowser

解决方案

您的代码有效，前提是“S”是小写的。accesskey每个浏览器和操作系统都有不同的键盘快捷键：在 Windows 和 Chrome 上的示例中，按下[Alt] + [s]将聚焦元素。

如果您需要不同的快捷键组合，则需要监听按键。这可以在普通 JS 中相当简单地完成，即在这个例子中。

但是，“Angular”方式意味着不直接与 DOM 交互。这可以通过注入Renderer2和设置事件监听器来实现：

constructor(private _r: Renderer2) {}

ngOnInit() {
  this._r.listen(document, 'keyup', (event) => {
  if(event.keyCode === 83) {
    // assuming you get a reference to the input element
    this.input.nativeElement.click();
  }
})
}

更好的是，使用 Observables：

ngOnInit() {
  Observable.fromEvent(document, 'keyup').pipe(
    filter(s => s.keyCode === 83)
  ).subscribe(s => this.doStuff())
}

这也可以很容易地包含在指令中。

推荐阅读