JavaScript でキーボード入力イベントを検出する方法

Web ページでのキーボード入力は、キーボードイベントで処理されます。addEventListener() でリスナーを登録し、そのコールバックに渡されるイベントオブジェクトを読み取ります。キーが押されたときに反応するには keydown を、キーが離された後に反応するには keyup を使用します。

addEventListener() でキーボードイベントをリッスンする

入力を受け取るべき要素にリスナーをアタッチします。ページ上のどこにフォーカスがあってもページが反応すべき場合は document を使用し、その動作が特定のコントロールに属する場合はフォームコントロールにアタッチします。コールバックは KeyboardEvent をパラメーターとして受け取るので、そのパラメーターに名前を付けてそのプロパティを読み取り、グローバルな event 値に頼らないようにします。

この実行可能なイラストは、document の小さな代替物を使用し、1 つのキーイベントを提供します。そのため、そのリスナーの形状を JavaScript ランタイムで試すことができます。ブラウザでは、実際の document を使用してキーボード入力を受け取ります。

const listeners = new Map();
const document = {
  addEventListener(type, callback) {
    listeners.set(type, callback);
  }
};

document.addEventListener("keydown", (event) => {
  console.log(`Key pressed: ${event.key}`);
});

listeners.get("keydown")({ key: "ArrowDown" });

実際のブラウザは、ユーザーがキーを押したときにコールバックを呼び出します。上記の代替物は、ハンドラーが使用するのと同じ key 値を含むオブジェクトでコールバックを呼び出します。ブラウザの入力やその他の KeyboardEvent の動作をシミュレートするものではありません。

keydown と keyup のどちらかを選択する

キーが押されると keydown イベントが発生します。これは、キーを押している間にゲームキャラクターを移動させるなど、すぐに開始すべきアクションに適しています。keyup イベントはキーが離されたときに発生し、ユーザーがキーを押し終えたときに発生すべきアクションに適しています。アクションが発生すべきタイミングに基づいてイベントを選択してください。押し続けられたキーは繰り返し keydown イベントを発生させることがあるため、アクションが 1 回だけ発生すべき場合はその点を考慮してください。

KeyboardEvent.key を読み取り、特殊キーを処理する

ハンドラーでキーを識別するには event.key を使用します。これは "a"、"Enter"、"ArrowDown" のような読み取り可能な値を返すため、比較が簡単です。たとえば、矢印キーのハンドラーは、アイテムを下に移動する前に event.key === "ArrowDown" であるかどうかを確認できます。修飾子の状態もイベントで利用でき、event.shiftKey や event.ctrlKey などのプロパティを通じて取得できます。

event.key の値は、アクティブなキーボードレイアウトと修飾子のもとでのキーの意味を反映します。ゲームコントロールのようにレイアウトが変わっても同じ場所に留まるなど、動作が物理的なキーの位置に従うべき場合は event.code を使用します。通常のコマンドや名前付きキーについては、通常 event.key の方が明確な選択です。

必要なときにキーのデフォルトアクションを防ぐ

キーボードイベントハンドラーは event.preventDefault() を呼び出して、そのキーに関連付けられたブラウザのアクション（カスタムインターフェースに矢印キーを使用する際のスクロールなど）を抑制できます。ページがそのアクションの責任を引き受ける場合にのみ呼び出し、動作がキャンセル可能性に依存する場合は event.cancelable を確認してください。これによってイベントが他のリスナーに到達しなくなるわけではありません。伝播メソッドは、それも意図した動作である場合にのみ使用してください。通常のキー検出にはキャンセルは必要ありません。

keypress を通常避けるべき理由

新しいキーボード処理に keypress を使用するのは避けてください。これは非推奨であり、すべてのキーを一貫してカバーするわけではありません。キーボードのアクションを観察するには keydown または keyup を使用し、キーの値を読み取るには event.key を使用します。現在のコードでは event.char や従来の keyCode プロパティに依存しないでください。キーとその状態を表す標準のイベントプロパティを使用してください。