【JavaScript】キーボードから入力されたキー情報を取得する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでキーボードから入力されたキー情報を取得する方法をご紹介しています。

キーボードから入力されたキーを取得するにはどうすればいいんだろう？

上記の疑問にお答えしています。

では、解説していきます。

キーボードから入力されたキー情報を取得する

下記はキーボードから入力されたキー情報を取得することができるスクリプトです。入力されたキーの情報はキーイベントのイベントオブジェクトから取得することができます。

document.addEventListener('keydown', (event)=>{

    console.log(event.key);

});

動作確認用にデモをご用意しました。デモ内を選択（クリック）した状態でキーボード入力をすると、コンソール上に入力したキーが表示されます。

See the Pen
bGwpvgK by ryohei (@intotheprogram)
on CodePen.

キーイベントが発火すると、イベントオブジェクトがハンドラに渡されます。イベントオブジェクトからは多くの情報を取得することができますが、入力されたキーという点では下記の2つがよく使用されています。

event.code	入力されたキーコードを取得する
event.key	入力されたキーを取得する

※キーコードについては下記に一覧がございます。

キーボードの入力から取得することができるkeyとcodeが確認できるデモを用意しました。下記のウィンドウ内を選択した状態でキーを入力すると、対象のevent.codeとevent.keyが表示されます。

See the Pen
6077-2 by ryohei (@intotheprogram)
on CodePen.

これでキーボードの入力からキー情報を取得することができます。

本記事では、キーボードのキーイベントとしてkeydownを使って解説してきましたが、イベントリスナーに登録できるキーイベントは他にもあります。

下記がイベントリスナーに登録することができるキーイベントです。

keydown	キーボードの任意のキーが押された際にイベントが発生します。
keypress	キーボードの「Shift、Fn、CapsLock」以外のキーが押された際にイベントが発生します。キーが押されたままの状態の場合はイベントが連続して発生します。
keyup	キーボードのキーが押された状態から解放された際にイベントが発生します。