Jakie są opcje (keyup) w Angular2?

Poniższe działa doskonale, gdy klawisz Enter jest zwolniony. Jakie inne opcje są dostępne dla keyupdodatku keyup.enter?

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

Oto opcje aktualnie udokumentowane w testach: ctrl, shift, enter i escape. Oto kilka ważnych przykładów powiązań klawiszy:

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

Możesz to śledzić tutaj, gdy nie istnieją żadne oficjalne dokumenty, ale powinny one wkrótce zostać opublikowane.

Szukałem sposobu na powiązanie z wieloma kluczowymi wydarzeniami - w szczególności Shift + Enter - ale nie mogłem znaleźć żadnych dobrych zasobów w Internecie. Ale po zalogowaniu się powiązania keydown

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

Odkryłem, że zdarzenie związane z klawiaturą dostarczyło wszystkich informacji potrzebnych do wykrycia Shift + Enter. Okazuje się, że $eventzwraca dość szczegółowe zdarzenie KeyboardEvent .

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

Istnieją również flagi dla CtrlKey, AltKey i MetaKey (tj. Klawisz Command na Macu).

Nie ma potrzeby stosowania KeyEventsPlugin, JQuery ani czystego wiązania JS.

Ten plik zawiera więcej wskazówek, na przykład keydown.up nie działa, potrzebujesz keydown.arrowup:

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

Dziś napotkałem ten sam problem.

Są słabo udokumentowane, istnieje otwarty problem.

Niektóre dla klucza , jak spacja:

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

Niektóre dla keydown
(może działać również dla keyup):

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

Wszystkie powyższe pochodzą z poniższych linków:

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/

możesz dodać takie zdarzenie keyup

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

w komponencie, zakoduj jak poniżej

export class KeyUpComponent_v1 {
  values = '';

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

Jeśli keyup zdarzenie jest poza CTRL, SHIFT, ENTERi ESCwspornika, wystarczy użyć instrukcji @Md Ayub Ali Sarker za. Jedynym pseudo-zdarzeniem dotyczącym keyup wspomnianym tutaj w dokumentach kątowych https://angular.io/docs/ts/latest/guide/user-input.html jest ENTERklucz. Nie ma jeszcze pseudo-zdarzeń keyup dla klawiszy numerycznych i alfabetów.

keyCodeJest przestarzała można użyć keywłasności wKeyboardEvent

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

Maszynopis:

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

Tak jak z wydarzeniami

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