处理 Tab 事件答案

【问题标题】：Handle Tab event处理 Tab 事件
【发布时间】：2017-07-03 14:08:06
【问题描述】：

如何在 Angular 2 中处理 Tab keypress 事件？

我从 Angular 文档中获取此信息以获取 keyCode。当我按其他键时效果很好，但是当我按 Tab 时没有任何反应。

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

@Component({
 selector: 'my-app',
 template: `<input (keyup)="onKey($event)">
            <p>{{values}}</p>`
})

export class AppComponent {
  values = '';
  onKey(event: any) { 
  this.values += event.keyCode+ ' | ';
  }
}

另外，这是在 Angular 2 中执行此操作的正确方法吗？

<input ng-keydown="($event.keyCode == 9) && 
       signal('something')" />

【问题讨论】：

标签： angular

【解决方案1】：

 <input (keydown.Tab)="onKey($event)">

【讨论】：

您需要添加tabundex="0"，这样div才能接收到焦点和键盘事件。
非常感谢！这对我行得通。有没有办法防止 Tab 的默认事件。 event.preventDefault() ?
我不太了解该评论，但是当false 像<input (keydown.Tab)="onKey($event);false"> 一样返回时，会调用preventDefault()。或者onKey() 可以回复false 或致电event.preventDefault()
当我按 Tab 时，首先焦点是整个浏览器窗口，然后是浏览器选项卡，然后是页面，然后是 div，最后它执行应该在 div 上执行的操作。当我第一次按 Tab 时，我想忽略所有这些并执行我的 onKey 功能。
您需要确保元素从一开始就有焦点，然后onKey() 应该在第一次按下tab 时执行。您可以通过调用element.focus() 来设置焦点。 stackoverflow.com/a/34573219/217408 显示了执行此操作的指令（使用 Renderer）

【解决方案2】：

<input (keypress)="someFunction($event.target.value)"/>

【讨论】：

【解决方案3】：

我遇到了类似的问题。我最初尝试在模板中使用$event，但在阅读了here 之后，似乎传递$event 并不是Angular 团队所鼓励的（详见链接）。他们建议使用模板引用变量。这很好，直到我尝试使用 tab 并最终得到 @freeNinja 得到的东西；选项卡会起作用，但随后会将焦点直接移至页面顶部。 @Günter Zöchbauer 上面 cmets 中的答案对我有用。在方法调用停止焦点转移后添加 false 。 (keydown.tab)="saveEntry(i, newCost.value); false

【讨论】：