キーボードの押されたキーを取得する

入力されたキーを取得する

キーボードのいずれかのキーが押されて入力が発生したとき、どのキーが押されたかはKeyboardEventオブジェクトのkeyプロパティから参照することができます。

以下のコードはキーが押されたときに発生するイベント「keydown」をイベントリスナーに登録し、押されたキーのkeyプロパティをコンソールに出力します。

イベント「keypress」

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

JS コード例

window.addEventListener('DOMContentLoaded', function(){
  window.addEventListener("keydown", function(e){
    e.preventDefault();
    console.log(e.key);
  });
});

キーが押されたときに発生するイベント「keydown」ではKeyboardEventオブジェクトが渡されるため、イベントリスナーで実行する処理を指定するときに変数e に入れておきます。

キーが押されたときの処理では真っ先にpreventDefaultメソッドを実行します。
これはキーが押されたときのデフォルトで発生する動作をキャンセルするためです。

続いて次の行で、console.logメソッドにkeyプロパティを渡して出力しています。

キーの複数入力を検出する

KeyboardEventオブジェクトはキーが押された時に、Shiftキー、Ctrlキー、Metaキーなど特定のキーが一緒に押された状態かを取得するプロパティが用意されています。
これらのプロパティを参照することで、キーの複数入力かどうかを判定することができます。
用意されているプロパティは以下の4種類あり、いずれも値はtrueかfalseです。

以下のコードはMacでcommandキーと「s」か「r」が押されたとき、またはWindowsでcommandキー「s」か「r」が押されたときにコンソールへメッセージを出力します。

JS コード例

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

  window.addEventListener("keydown", function(e){
    e.preventDefault();
  
    if( e.metaKey ) {
      if( e.key === 's' ) {
        console.log("Save on mac");
      }
  
      if( e.key === 'r' ) {
        console.log("Reload on mac");
      }
    }
  
    if( e.ctrlKey ) {
      if( e.key === 's' ) {
        console.log("Save on windows");
      }
  
      if( e.key === 'r' ) {
        console.log("Reload on windows");
      }
    }
  });

});

if文が入れ子になっていますが、外側のif文ではmetaKeyプロパティとctrlKeyプロパティの値をそれぞれ確認しています。
これは、キー入力があったときにmetaキーやcontrolキーが同時に押されていることを確認することができます。

内側のif文では「s」か「r」が押されていることを確認します。
いずれかに一致した時に、それぞれメッセージを出力しています。
なお、ここでもpreventDefaultメソッドを実行しているため、再読み込みのショートカットが入力されても実行されることはありません。

上記のプロパティ以外のキーで同時入力を検出したいときは、「キーボード入力時に処理を実行する」の「複数のキーの同時押しを検知する」で解説している方法を試してみてください。

キーの押しっぱなし状態を検出する

キーボードのいずれかのキーが押しっぱなしなどで入力が連続して発生したとき、KeyboardEventオブジェクトのrepeatプロパティの値がtrueになります。

以下のコードはキーが押しっぱなしになっている間、押されたキーのkeyプロパティをコンソールに出力します。

JS コード例

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

  window.addEventListener("keydown", function(e){
    e.preventDefault();

    if( e.repeat ) {
      console.log(e.key);
    }
  });

});

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

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