【JavaScript】ブラウザ上でキーボードのどのキーが押されたかを取得する方法| プロサバメモ

WEBプログラミングやサーバ設定などのメモ場

【JavaScript】ブラウザ上でキーボードのどのキーが押されたかを取得する方法

2022.12.122023.01.19

JavaScriptを使いブラウザ上でキーボードのキーを押したときにどのキーが押されたかを取得する方法です。

1. サンプルコード

下のサンプルのプレビュー部分をフォーカス(クリックなどして)してからキーボードの任意のキーを押してみてください。

Created by SampleCode.

サンプルを実行すると、押したkeyとそのcodeとkeyCodeが確認できます。

keydownはキーが押されたときに発火するイベントです。

キーが上がった時にイベント発火させたいときはkeyupを登録(に変更)すればOK。

key情報が取得できたら後は、条件分岐などで「このキー」が押されたら「あの処理」を実行するなどのプログラムが書けます。

ちなみに、preventDefaultを記述しているのは、「タブ」などを押した際にブラウザ本来の動作が発火してフォーカスが次の要素に移行するのを防ぐ目的です。
(preventDefaultが無いとどうなるかサンプルを変更して「タブ」キーを押してみてください。)

関連記事

TOP