こんにちは、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 入力されたキーを取得する

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

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

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

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

その他のキーイベントについて

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

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

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

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

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

最後に

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

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

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

JavaScriptを体系的に学びたい方

下記の参考書がおすすめです。私も勉強を始めた際に購入しました。入門書として必要な基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。