【JavaScript】ブラウザ上でキーボードのどのキーが押されたかを取得する方法
2022.12.122023.02.22
JavaScriptを使いブラウザ上でキーボードのキーを押したときにどのキーが押されたかを取得する方法です。
1. サンプルコード
下のサンプルのプレビュー部分をフォーカス（クリックなどして）してからキーボードの任意のキーを押してみてください。
サンプルを実行すると、押したkeyとそのcodeとkeyCodeが確認できます。
keydownはキーが押されたときに発火するイベントです。
キーが上がった時にイベント発火させたいときはkeyupを登録（に変更）すればOK。
key情報が取得できたら後は、条件分岐などで「このキー」が押されたら「あの処理」を実行するなどのプログラムが書けます。
ちなみに、preventDefaultを記述しているのは、「タブ」などを押した際にブラウザ本来の動作が発火してフォーカスが次の要素に移行するのを防ぐ目的です。
（preventDefaultが無いとどうなるかサンプルを変更して「タブ」キーを押してみてください。）