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

82

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

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>
AlikElzin-kilaka
fuente
Quizás esto podría darte una pista github.com/angular/angular/issues/523 , aunque es bastante antiguo.
Eric Martinez

Respuestas:

57

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 aquí mientras no existan documentos oficiales, pero deberían estar disponibles pronto.

Universidad Angular
fuente
5
Vaya, esta respuesta se dio cuando Angular estaba en su vigésimo alfa y todavía funciona hoy.
JP ten Berge
Documentación relacionada angular.io/guide/user-input#key-event-filtering-with-keyenter
Lars Gyrup Brink Nielsen
23

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

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

Descubrí que el evento de teclado proporcionaba toda la información que necesitaba para detectar Shift + Enter. Resulta que $eventdevuelve 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 de comando en Mac).

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

protalk
fuente
12

Hoy he tenido el mismo problema.

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
(pueden 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)="...">

Todos los anteriores son de los siguientes enlaces:

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

Manohar Reddy Poreddy
fuente
11

puedes agregar un evento 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 + ' | ';
  }
}
Md Ayub Ali Sarker
fuente
1
Esto no funciona con números. El evento keyup no se activa si escribo un número en el campo de entrada. ¿Qué podemos hacer para eso?
Monica
2

Si el evento es keyup fuera del CTRL, SHIFT, ENTERy ESCel soporte, sólo tiene que utilizar la guía de @Md Ayub Ali Sarker. El único pseudoevento de keyup mencionado aquí en los documentos angulares https://angular.io/docs/ts/latest/guide/user-input.html es ENTERclave. Aún no hay pseudoeventos de teclado para teclas numéricas y alfabetos.

Benny64
fuente
Lo siento, Robert. No tuve problemas para navegar a los documentos de Angular usando el enlace. Funciona.
Benny64
Sí, funciona ahora. Probablemente el problema estaba de mi lado. Lo siento.
robert
0

El keyCodees obsoleto puede utilizar keyla propiedad en elKeyboardEvent

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

Mecanografiado:

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' 
    }
}
Siv
fuente
0

Uno como con eventos

(keydown)="$event.keyCode != 32 ? $event:$event.preventDefault()"
Aniruddha Das
fuente