Welche Optionen gibt es für (Keyup) in Angular2?

Das Folgende funktioniert hervorragend, wenn die Eingabetaste losgelassen wird. Welche weiteren Optionen stehen keyupzusätzlich für zur Verfügung keyup.enter?

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

Dies sind die Optionen, die derzeit in den Tests dokumentiert sind: Strg, Umschalt, Eingabe und Escape. 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, diese sollten jedoch bald veröffentlicht werden.

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

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

Ich stellte fest, dass das Tastaturereignis alle Informationen lieferte, die ich zum Erkennen von Umschalt + Eingabetaste benötigte. Es stellt sich heraus, dass $eventein ziemlich detailliertes KeyboardEvent zurückgegeben wird .

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

Es gibt auch Flags für CtrlKey, AltKey und MetaKey (dh Befehlstaste auf dem Mac).

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

Diese Datei gibt Ihnen einige weitere Hinweise. 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

Habe heute das gleiche Problem getroffen.

Diese sind schlecht dokumentiert, ein offenes Problem besteht.

Einige für Keyup , wie Leerzeichen:

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

Einige für Keydown
(funktioniert möglicherweise auch für Keyup):

<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 sind von unten Links:

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/

Sie können ein Keyup-Ereignis wie dieses hinzufügen

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

Codieren Sie in Component einige wie unten

export class KeyUpComponent_v1 {
  values = '';

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

Wenn Ihr keyup Ereignis außerhalb der ist CTRL, SHIFT, ENTERund ESCHalter, benutzen Sie einfach @Md Ayub Ali Sarker Leitfaden. Das einzige Keyup-Pseudo-Ereignis, das hier in den eckigen Dokumenten https://angular.io/docs/ts/latest/guide/user-input.html erwähnt wird, ist der ENTERSchlüssel. Es gibt noch keine Keyup-Pseudoereignisse für Zifferntasten und Alphabete.

Das keyCodeist veraltet, Sie können keyEigenschaft in der verwendenKeyboardEvent

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

Typoskript:

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' 
    }
}

Eins wie bei Events

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