webentwicklung-frage-antwort-db.com.de

Was sind die Optionen für (Keyup) in Angular2?

Das Folgende funktioniert gut, wenn die Taste enter losgelassen wird. Welche anderen Optionen gibt es zusätzlich zu keyup.enter für die keyup?

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

Dies sind die Optionen, die derzeit in den Tests dokumentiert sind: Strg, Verschieben, Eingeben und Flucht. Dies sind einige gültige Beispiele für Schlüsselbindungen:

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

Sie können dies hier verfolgen, solange keine offiziellen Dokumente vorhanden sind, aber sie sollten bald heraus sein.

48

Diese Datei enthält einige weitere Hinweise, zum Beispiel keydown.up funktioniert nicht. Sie benötigen keydown.arrowup:

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

12
Kasper

Ich habe nach einer Möglichkeit gesucht, mich an mehrere wichtige Ereignisse zu binden - insbesondere Umschalt + Eingabe -, konnte jedoch keine guten Ressourcen online finden. Aber nach dem Einloggen der Keydown-Bindung

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

Ich entdeckte, dass das Tastaturereignis alle Informationen enthielt, die ich brauchte, um Shift + Enter zu erkennen. Stellt sich heraus, dass $event ein ziemlich detailliertes KeyboardEvent zurückgibt.

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

Es gibt auch Flags für die Tastenkombination CtrlKey, AltKey und MetaKey (d. H. Befehlstaste bei Mac).

Das KeyEventsPlugin, JQuery oder eine reine JS-Bindung ist nicht erforderlich.

5
protalk

sie können das Keyup-Ereignis wie folgt hinzufügen 

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

code in Component, wie unten beschrieben

export class KeyUpComponent_v1 {
  values = '';

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

Wenn sich Ihr Keyup - Ereignis außerhalb der befindet CTRLSHIFTENTER und ESC Verwenden Sie einfach die Anleitung von @Md Ayub ALi Sarker. Das einzige Keyup-Pseudoereignis, das hier in winkligen Dokumenten erwähnt wird https://angular.io/docs/ts/latest/guide/user-input.html ist ENTER Schlüssel. Es gibt noch keine Keyup-Pseudo-Events für Zifferntasten und Alphabete.

1
Benny64

Für Angular 7 kann keyup verwendet werden. https://angular.io/guide/user-input

0
user2148228

Habe heute das gleiche Problem getroffen.

Diese sind schlecht dokumentiert, es gibt ein offenes Problem.

Einige für keyup, z. B. Leerzeichen: 

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

Einige für keydown
(kann auch für das Keyup funktionieren):

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

Alle oben genannten Links sind von unten:

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/