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


Answers:


57

这些是当前在测试中记录的选项:Ctrl,Shift,Enter和Escape。这些是键绑定的一些有效示例:

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

在没有正式文档的情况下,您可以在这里进行跟踪,但是应该很快就出来。


5
哇,这个答案是在Angular处于第20个alpha版本时给出的,直到今天仍然有效。
太平绅士10 Berge



23

我正在寻找一种绑定多个关键事件的方法-尤其是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绑定。



12

今天遇到了同样的问题。

这些文献记录不充分,存在未解决的问题。

一些用于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/


11

您可以像这样添加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 + ' | ';
  }
}

1
这不适用于数字。如果我在输入字段中键入数字,则不会触发keyup事件。我们能为此做什么?
莫妮卡


0

keyCode已被弃用,你可以使用key在属性KeyboardEvent

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

打字稿:

onKeydownEvent($event: KeyboardEvent){

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


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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.