javascript - not - ¿Cuáles son las opciones para(keyup) en Angular2?

keyup.enter angular 4

Question

Lo siguiente funciona muy bien cuando se suelta la tecla Intro . ¿Qué otras opciones están disponibles para keyup además de keyup.enter ?

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

Answer 1

Estaba buscando una forma de vincularme a múltiples eventos clave, específicamente, Shift + Enter, pero no pude encontrar buenos recursos en línea. Pero después de registrar el enlace de keydown

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

Descubrí que el evento del teclado proporcionaba toda la información que necesitaba para detectar Shift + Enter. Resulta que $event devuelve un KeyboardEvent bastante detallado.

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

También hay indicadores para CtrlKey, AltKey y MetaKey (es decir, la tecla Comando en Mac).

No es necesario el KeyEventsPlugin, JQuery o un enlace JS puro.

Answer 2

Estas son las opciones actualmente documentadas en las pruebas: ctrl, shift, enter y escape. Estos son algunos ejemplos válidos de asociaciones de teclas:

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

Puede rastrear esto here mientras no existan documentos oficiales, pero deberían salir pronto.

Answer 3

Este archivo le da algunas pistas más, por ejemplo, keydown.up no funciona, necesita keydown.arrowup:

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

Answer 4

Han tocado el mismo problema hoy.

Estos están mal documentados, existe un problema abierto.

Algunos para keyup , como el espacio:

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

Algunos para keydown
(puede funcionar también para keyup):

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

Todo lo anterior es de abajo enlaces:

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

Answer 5

Si su evento de keyup está fuera del soporte CTRL , SHIFT , ENTER y ESC , simplemente use la guía de @Md Ayub Ali Sarker. El único pseudoevento de keyup mencionado aquí en documentos angulares https://angular.io/docs/ts/latest/guide/user-input.html es la tecla ENTER . Todavía no hay seudoeventos de keyup para teclas numéricas y alfabetos.

Answer 6

puedes agregar un evento de keyup como este

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

en Componente, codifique algunos como a continuación

export class KeyUpComponent_v1 {
  values = '''';

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