Angular2中的(keyup)有哪些选项？

Question

释放回车键时,以下工作非常有效.除此之外还有哪些其他选择？keyupkeyup.enter

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>

Answer 1

这些是目前测试中记录的选项:ctrl,shift,enter和escape.这些是键绑定的一些有效示例:

keydown.control.shift.enter
keydown.control.esc

你可以在这里跟踪这个,但没有官方文档,但它们应该很快就会出来.

Answer 2

我正在寻找一种绑定到多个关键事件的方法 - 特别是Shift + Enter - 但是在网上找不到任何好的资源.但是在记录了keydown绑定之后

<textarea (keydown)=onKeydownEvent($event)></textarea>

我发现键盘事件提供了检测Shift + Enter所需的所有信息.事实证明,$event返回一个相当详细的KeyboardEvent.

onKeydownEvent(event: KeyboardEvent): void {
   if (event.keyCode === 13 && event.shiftKey) {
       // On 'Shift+Enter' do this...
   }
}

还有CtrlKey,AltKey和MetaKey的标志(即Mac上的Command键).

不需要KeyEventsPlugin,JQuery或纯JS绑定.

Answer 3

今天遇到了同样的问题。

这些文件记录不充分，存在一个未解决的问题。

一些用于keyup，例如空格：

<input (keyup.space)="doSomething()">
<input (keyup.spacebar)="doSomething()">  

一些用于keydown
（也可能适用于 keyup）：

<input (keydown.enter)="...">
<input (keydown.a)="...">
<input (keydown.esc)="...">
<input (keydown.alt)="...">
<input (keydown.shift.esc)="...">
<input (keydown.shift.arrowdown)="...">
<input (keydown.f4)="...">

以上全部来自以下链接：

https://github.com/angular/angular/issues/18870
https://github.com/angular/angular/issues/8273
https://github.com/angular/angular/blob/master/packages/platform-浏览器/src/dom/events/key_events.ts
https://alligator.io/angular/binding-keyup-keydown-events/

Answer 4

这个文件给你一些提示,例如,keydown.up不起作用你需要keydown.arrowup:

https://github.com/angular/angular/blob/630d93150a58581a0d474ebf1befb5d09b6813c5/modules/angular2/src/platform/browser/browser_adapter.dart

Answer 5

您可以像这样添加keyup事件

template: `
  <input (keyup)="onKey($event)">
  <p>{{values}}</p>
`

在组件中，代码如下

export class KeyUpComponent_v1 {
  values = '';

  onKey(event:any) { // without type info
    this.values += event.target.value + ' | ';
  }
}

Answer 6

已keyCode弃用，您可以key在中使用属性KeyboardEvent

<textarea (keydown)=onKeydownEvent($event)></textarea>

打字稿：

onKeydownEvent($event: KeyboardEvent){

    // you can use the following for checking enter key pressed or not
    if ($event.key === 'Enter') {
      console.log($event.key); // Enter
    }


    if ($event.key === 'Enter' && event.shiftKey) {
           //This is 'Shift+Enter' 
    }
}