Question

在Angular 2中使用（按键）时，是否可以找出按下了哪个键？

E.g。

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

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

编辑：似乎我的命名约定有点过时了。我不是指AngularJS 2，我的意思是带有打字稿的Angular 2.0。

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

基于对答案的评论：

这不会检测到所有事件。例如，不是箭头键或转义。但你可以使用（keydown）来获取所有这些。

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

<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

从（按键）angular2获取按键

4 个答案: