JavaScript

レシピ

イベント

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

キーボードによる入力があったときに指定した処理を実行する方法について解説します。

この記事のポイント

  • キー入力のイベントは3種類
  • 文字、数字、記号のみの入力を検出するときはイベント「keypress」を使う
  • 全てのキーの入力を検出するときはイベント「keydown」と「keyup」を使う

目次

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

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

イベント名発生するタイミング
keypress文字、数字、記号のいずれかが入力されたときに発生する。ShiftやCtrl、F1〜F12など文字以外のキーでは発生しない。
keydownキーが押された瞬間に発生する。押し続けている間はイベントが発生し続ける。
keyupキーから指が離れて入力が終わるときに発生する

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

イベント「keypress」

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

JavaScript コード例

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

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

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

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

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

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

コンソールの出力例

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

イベント「keydown」と「keyup」

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

JavaScript コード例

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へ押されたキーの情報を追加していきます。
そして入力が完了したタイミングで配列に入っている値を出力して、その後に配列を初期化します。

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){
  
  var 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オブジェクトを入れることで初期化を行い終了です。

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

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

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