特定のキーをAngularのKeyupおよびKeydownイベントにバインドする方法

Angular2+テンプレートのkeyupまたはkeydownイベントにバインドする場合、キー名を指定できます。これにより、イベントに適用されるフィルターが適用されるため、特定のキーが押されたときにのみトリガーされます。

この記事では、keyupおよびkeydownイベントをリッスンするときにキー名を使用する方法を学習します。

キー名の使用

まず、キー名を使わない例を見てみましょう。

ユーザーが情報を提供するための<input>要素があるとします。ユーザーがENTERキーを押したときに、コンソールにログインします。

<input (keydown)="onKeydown($event)">

onKeydown()を起動するkeydownイベントハンドラーをバインドしました。

次に、ENTERキーの押下を処理するonKeydown()関数を記述しましょう。

onKeydown(event) {
  if (event.key === "Enter") {
    console.log(event);
  }
}

keydownイベントごとにチェックが実行され、event.keyの値がEnterであるかどうかが判別されます。 trueの場合、eventをコンソールに記録します。

同じ例ですが、イベントにENTERキー名が追加されています。

<input (keydown.enter)="onKeydown($event)">

onKeydown()を起動するkeydown.enterpseudo-eventハンドラーをバインドしました。

次に、onKeydown()関数を書き直してみましょう。

onKeydown(event) {
  console.log(event);
}

Angularのkeydown.enter疑似イベントに依存することで、event.keyの値がEnterであるかどうかを手動で確認する必要がなくなりました。

この機能は、ENTER、エスケープ（ESC）、SHIFT、ALT、TAB、BACKSPACE、およびコマンド（ meta ）：

ただし、文字、数字、矢印、およびファンクションキー（F1からF12）でも機能します。

これは、Angularがフィルタリングできるキー値の完全なリストです。

キーを組み合わせて、キーの組み合わせがトリガーされたときにのみイベントをトリガーすることもできます。次の例では、CONTROLキーと1キーが同時に押された場合にのみイベントがトリガーされます。

<input (keyup.control.1)="onKeydown($event)">

何が可能かを理解するための例をさらにいくつか示します。

キー	キー名
`SHIFT+ESC`	`<input (keydown.shift.esc)="...">`
`SHIFT+ARROWDOWN`	`<input (keydown.shift.arrowdown)="...">`
`SHIFT+CONTROL+Z`	`<input (keydown.shift.control.z)="...">`

Angular2+テンプレートがkeyupおよびkeydown疑似イベントによるキー名のフィルタリングをどのようにサポートするかを学習しました。

このアプローチの利点には、キー値の手動チェックの繰り返しが少なく、修飾キーと非修飾キーの組み合わせを処理することが含まれます。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。