キーボード入力時に処理を実行する

キーボードの入力で発生するイベントについて

キーボードのいずれかのキーが押されて入力が発生したとき、キーを押している状態によって以下の3種類のイベントが発生します。

keypressは独立して発生し、keydownとkeyupは入力を開始した時、終了した時のセットで呼び出されます。
文字や数字を入力したときはkeypressとkeydownが同時に発生することもあります。

イベント「keypress」

まずはイベント「keypress」をイベントリスナーに登録し、入力されたキーをそのまま出力してみましょう。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

  window.addEventListener("keypress", function(e){
    console.log("Key press:" + e.key);
  });
});

1行目はページが読み込み完了したタイミングで発生するイベント「DOMContentLoaded」をイベントリスナーに登録します。
このイベントリスナーを設定することで、ページ読み込み時にキーボードの入力で発生するイベントについての設定をすることできます。

続いて、キーボードの入力に対するイベント「keypress」をイベントリスナーに登録します。
ここでは入力されたキーをコンソールに出力する処理を指定しています。

引数に渡している変数eはKeyboardEventオブジェクトです。
このオブジェクトには、キー入力したときに押されたキーの情報をプロパティに持っているため、どのキーが押されたか知りたい時に便利です。

このコードを実行すると、文字や数字、記号などを入力したときに以下のようにコンソールへ出力されます。

コンソールの出力例

Key press:a
Key press:A
Key press:9
Key press:2
Key press: (Space)
Key press:<
Key press:>

イベント「keydown」と「keyup」

続いて、キー入力が開始したときに発生する「keydown」と、入力終了したときに発生する「keyup」をイベントリスナーに登録し、入力したキーを出力してみましょう。

JS コード例

window.addEventListener('DOMContentLoaded', function(){

  window.addEventListener("keydown", function(e){
    e.preventDefault();
    console.log("Key Down:" + e.key);
  });

  window.addEventListener("keyup", function(e){
    console.log("Key Up:" + e.key);
  });
});

イベント「keypress」は文字や数字、記号のみの入力に対応していたのに対して、「keydown」と「keyup」はShiftやCtrlなどのメタキーも対応しています。
そのため、上記のコードではkeydownで実行する処理の中でpreventDefaultメソッドを実行して、デフォルトで発生するアクションを無効にします。

このコードを実行して、例えば「command + r」、「a」、「Shift + g」の順番で入力すると、次のようにコンソールに出力されます。

コンソールの出力例

Key Down:Meta
Key Down:r
Key Up:Meta
Key Up:r
Key Down:a
Key Up:a
Key Down:Shift
Key Down:G
Key Up:G
Key Up:Shift

複数のキーの同時押しを検知する

ショートカットキーのように、一度に複数のキーが押されることもあります。
もしこのような同時入力を検知したい場合は、イベント「keydown」が発生したときに押されたキーを一旦配列などに保持することで実装することができます。

以下のコードはイベント「keydown」が発生するたびに配列key_inputへ押されたキーの情報を追加していきます。
そして入力が完了したタイミングで配列に入っている値を出力して、その後に配列を初期化します。

JS コード例

window.addEventListener('DOMContentLoaded', function(){
  
  let key_input = new Array();

  window.addEventListener("keydown", function(e){
    e.preventDefault();
    key_input.push(e.key);
  });

  window.addEventListener("keyup", function(e){
    if( 0 < key_input.length ) {
      console.log(key_input);
      key_input = new Array();
    }
  });
});

複数のキーが同時に押されるときは、キーから指が離れたときに発生するイベント「keyup」が発生する前に複数の「keydown」が発生するため、その性質を使って配列に押されたキーの情報を挿入します。

まずはイベント「keydown」をイベントリスナーに登録しますが、実行する処理の1行目でpreventDefaultメソッドを実行してデフォルトで発生するイベントを解除します。
例えばブラウザの再読み込みのショートカットキーである「Ctrl + R」や「Command + R」を押しても再読み込みされなくなります。

2行目のpushメソッドで、配列key_inputに入力したキーの情報（keyプロパティ）を追加します。

続いて、入力が終了したときに発生するイベント「keyup」をイベントリスナーに登録します。
ここで実行する処理は配列が空でないことを確認したうえで、配列の中身をコンソールに出力します。
そして最後に配列に新しいArrayオブジェクトを入れることで初期化を行い終了です。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。