JavaScript

レシピ

イベント

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

キーボードによる入力があったときに押されたキーを取得したり、複数キーの同時押しを検出する方法について解説します。

この記事のポイント

  • 押されたキーはkeyプロパティから取得する
  • ショートカット入力など2つ以上のキーが同時押しされた状態を取得する
  • キーが押しっぱなし状態のときはrepeatプロパティで検出する

目次

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

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

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

イベント「keypress」

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

コード例

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

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

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

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

Note

KeyboardEventオブジェクトは他にもcodeプロパティkeyCodeプロパティなどが用意されていますが、これらのプロパティはキーボードによってキーと値が一致しないケースがあるため非推奨とされています。

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

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

プロパティ名対応するキー
altKeyaltキー、optionキー、キー
ctrlKeyctrlキー、controlキー
metaKeyWindows(スタート)キー、commandキー
shiftKeyshiftキー

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

コード例

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プロパティをコンソールに出力します。

コード例

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

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

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

});

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

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

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