获取从（keypress）angular2按下的键答案

【问题标题】：Get which key pressed from (keypress) angular2获取从（keypress）angular2按下的键
【发布时间】：2016-03-13 11:31:43
【问题描述】：

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

例如

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

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

编辑：似乎我的命名约定有点偏离。我不是指 AngularJS 2，我指的是带有 typescript 的 Angular 2.0。

【问题讨论】：

你在用 angularjs 吗？

标签： javascript angular

【解决方案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) {...}

【讨论】：

这不会检测所有事件。例如不是箭头键或转义。但您可以使用 (keydown) 来获取所有这些。
event.key 似乎是现在使用的那个，它给出了一个类似'0'、'a'、'ArrowLeft'等的字符串。不鼓励使用 event.keyCode。
function AvoidSpace(event: any) { var k = event ? event.which : window.event.keyCode;如果（k == 32）返回假；上面是我用来防止用户在输入框中输入空格的代码。我在angular2中实现这个。我收到一个关于键码的错误，说“'事件'类型上不存在属性'键码'。任何”。我该怎么办？
如果你想检测退格 ..etc 使用 keydown
谢谢你，马克，另一个准确、简洁的答案。您对 StackOverflow 的贡献一次又一次地帮助了我。

【解决方案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)">

【讨论】：

不错的解决方案。无需检查组件中的关键代码等。
我打算写同样的答案。我在这里找到了这种用法。 alligator.io/angular/binding-keyup-keydown-events

【解决方案3】：

根据对答案的评论：

这不会检测所有事件。例如不是箭头键或转义。但是您可以使用 (keydown) 来获取所有这些。

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

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

eventHandler(keyCode) {...}

【讨论】：

【解决方案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

【讨论】：