序章

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)、SHIFTALTTABBACKSPACE、およびコマンド( meta ):

キー キー名
ENTER <input (keydown.enter)="...">
ESC <input (keydown.esc)="...">
ALT <input (keydown.alt)="...">
TAB <input (keydown.tab)="...">
BACKSPACE <input (keydown.backspace)="...">
CONTROL <input (keydown.control)="...">
COMMAND <input (keydown.meta)="...">

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

キー キー名
A <input (keydown.a)="...">
9 <input (keydown.9)="...">
ARROWUP <input (keydown.arrowup)="...">
F4 <input (keydown.f4)="...">

これは、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トピックページで演習とプログラミングプロジェクトを確認してください。