【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	キーボードのキーが押された状態から解放された際にイベントが発生します。

キー入力であれば本記事で使用したkeydownが用途にあてはまるかと思いますが、コントロール関係を除外したいときや、キーが押された状態から解放されたときのイベントが取得したい場合は変更してご使用いただければと思います。

他に指定することができるイベントにつきましては下記のページでご紹介しています。併せてご確認ください。

最後に

キーボードのキー入力を取得して何らかの処理を実行するというのは、ブラウザで実行する簡単なゲームや、Canvasなどにでも活用できそうですね。また、ある特定のキーが入力されたら画面内のコンテンツを強調するなど、ユニークなアニメーションが作成できる気がします。

JavaScriptで入力されたキーの情報を取得するのはそんなに難しいことではないので、後はアイデアで閲覧者が驚くような仕組みを考えていただければと思います！

以上、JavaScriptでキーボードから入力されたキー情報を取得する方法のご紹介でした！