获取从 (keypress) angular2 按下哪个键

Question

在Angular2中使用(keypress)时是否可以找出按下的是哪个键？

例如

<input type=text (keypress)=eventHandler()/>

public eventHandler() {
    //Some code
    console.log(keyPressed);
}

编辑：我的命名约定似乎有点不对劲。我不是说 AngularJS 2，我的意思是 Angular 2.0 with typescript。

Answer 1

将 $event 传递给您的事件处理程序。 $event 是 DOM KeyboardEvent.

<input type=text (keypress)="eventHandler($event)">

eventHandler(event) {
   console.log(event, event.keyCode, event.keyIdentifier);
}

如果你知道你想要哪个 KeyboardEvent 属性，你可以将它传递给你的事件处理程序：

<input type=text (keypress)="eventHandler($event.keyCode)">

eventHandler(keyCode) {...}

Answer 2

@Component({
  selector: 'key-up3',
  template: `
    <input #box (keyup.enter)="onEnter(box.value)">
    <p>{{value}}</p>
  `
})
export class KeyUpComponent_v3 {
  value = '';
  onEnter(value: string) { this.value = value; }
}

或者像这样使用..

 <input #box (keyup.enter)="onSubmit(form.value)">
 <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)">

Answer 3

根据对答案的评论：

this does not detect all events. for example not arrow keys or escape. but you can use (keydown) to get all of them.

获取所有事件退格键和删除键或任何键的最佳解决方案，只需使用（输入）

<input type=text (input)="eventHandler($event.keyCode)">

eventHandler(keyCode) {...}

Answer 4

2020 年更新：

event.keyCode 已弃用，您应该改用 event.code（先检查浏览器兼容性）

<input type=text (keypress)="eventHandler($event)">

eventHandler(event: KeyboardEvent) {
   console.log('Key pressed is:', event.code);
}

弃用 event.keyCode：

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

event.code 浏览器兼容性：

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code#Browser_compatibility

获取从 (keypress) angular2 按下哪个键

Get which key pressed from (keypress) angular2

javascript

angular