web-dev-qa-db-ja.com

Angular 2 HostListener keypressはエスケープキーを検出しますか？

次の方法を使用して、ページ上のキー押下を検出しています。私の計画は、Escキーが押されたときを検出し、そうであればメソッドを実行することです。今のところ、どのキーが押されたかを記録しようとしています。ただし、エスケープキーは検出されません。

@HostListener('document:keypress', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
  console.log(event);
  let x = event.keyCode;
  if (x === 27) {
      console.log('Escape!');
  }
}
javascriptangularescapingkeypress
36
Jeremy Parkhurst

keydownまたはkeyupイベントで試して、Escキーをキャプチャします。本質的に、document:keypressをdocument:keydown.escapeに置き換えることができます。

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    console.log(event);
}
67
Sawant

次のコードを使用してうまくいきました：

const ESCAPE_KEYCODE = 27;

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if (event.keyCode === ESCAPE_KEYCODE) {
        // ...
    }
}

またはより短い方法で：

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(evt: KeyboardEvent) {
    // ...
}
30
Gaurav Pandvia

モダンなアプローチ

@HostListener('document:keydown', ['$event']) onKeydownHandler(event: KeyboardEvent) {
    if (event.key === "Escape") {
        // Do things
    }
}
6
Gibolt

キーダウンとキーアップは機能しているようです： http://embed.plnkr.co/VLajGbWhbaUhCy3xss8l/

3
Lucas Tétreault

Angularは@HostListenerデコレーターを使用してこれを簡単にします。これは、イベント名を引数として受け入れる関数デコレータです。そのイベントがHost要素で発生すると、関連する関数を呼び出します。

@HostListener('document:keydown.escape', ['$event']) onKeydownHandler(event: 
    KeyboardEvent) {
    this.closeBlade();
   }
0
Meikandanathan