web-dev-qa-db-fra.com

Quelles sont les options pour (keyup) dans Angular2?

Ce qui suit fonctionne très bien lorsque la touche enter est relâchée. Quelles autres options sont disponibles pour la keyup en plus du keyup.enter? 

<input #inputstring (keyup.enter)="doSomething(inputstring.value)"/>
javascripthtmlonkeyupangular
53
AlikElzin-kilaka

Ce sont les options actuellement documentées dans les tests: ctrl, shift, entrée et échappement. Voici quelques exemples valides de liaisons de clés:

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

Vous pouvez suivre ceci ici tant qu’aucune documentation officielle n’existe, mais ils devraient sortir bientôt.

48
Angular University

Ce fichier vous donne quelques astuces supplémentaires. Par exemple, keydown.up ne fonctionne pas, vous avez besoin de keydown.arrowup:

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

12
Kasper

Je recherchais un moyen de faire la liaison à plusieurs événements clés - en particulier Maj + Entrée - mais je ne trouvais aucune bonne ressource en ligne. Mais après avoir enregistré la liaison keydown

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

J'ai découvert que l'événement clavier fournissait toutes les informations nécessaires pour détecter Maj + Entrée. Il s'avère que $event renvoie un KeyboardEvent relativement détaillé.

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

Il y a aussi des drapeaux pour CtrlKey, AltKey et MetaKey (c'est-à-dire la touche de commande sur Mac).

Pas besoin de KeyEventsPlugin, JQuery ou d'une liaison JS pure.

5
protalk

vous pouvez ajouter un événement keyup comme celui-ci 

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

dans Component, codez certains comme ci-dessous

export class KeyUpComponent_v1 {
  values = '';

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

Si votre événement keyup est en dehors de la CTRL, SHIFT, ENTER et ESC crochet, utilisez le guide de @Md Ayub ALi Sarker. Le seul pseudo-événement keyup mentionné ici dans les documents angulaires https://angular.io/docs/ts/latest/guide/user-input.html est ENTER clé. Il n'y a pas encore de pseudo-événements keyup pour les touches numériques et les alphabets.

1
Benny64

Pour Angular _ 7 keyup peut être utilisé. https://angular.io/guide/user-input

0
user2148228

Ont frappé le même problème aujourd'hui.

Celles-ci sont mal documentées, un problème en suspens existe.

Certains pour keyup, comme l'espace: 

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

Certains pour keydown
(peut aussi fonctionner pour keyup):

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

Tous ci-dessus sont des liens ci-dessous:

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/

0
Manohar Reddy Poreddy