- キーボードイベントリスナーの追加:
まず、矢印キーの押下を監視するために、キーボードイベントリスナーを追加します。以下のように、
keydown
イベントとイベントリスナーを使用します。
document.addEventListener('keydown', handleKeyDown);
function handleKeyDown(event) {
// キーコードを取得
const keyCode = event.keyCode || event.which;
// 矢印キーのキーコードを確認
if (keyCode === 37) {
// 左矢印キーが押された場合の処理
} else if (keyCode === 38) {
// 上矢印キーが押された場合の処理
} else if (keyCode === 39) {
// 右矢印キーが押された場合の処理
} else if (keyCode === 40) {
// 下矢印キーが押された場合の処理
}
}
-
キーコードの判定: イベントオブジェクトから取得したキーコードを使用して、押されたキーが矢印キーかどうかを判定します。左矢印キーのキーコードは37、上矢印キーのキーコードは38、右矢印キーのキーコードは39、下矢印キーのキーコードは40です。
-
各矢印キーごとの処理: キーコードが矢印キーに対応する場合、各矢印キーごとの処理を記述します。これにより、矢印キーの押下に応じて特定のアクションを実行することができます。
以上が、JavaScriptで矢印キーの押下を検出するためのシンプルで簡単な方法です。この方法を使用することで、ウェブページやアプリケーションでキーボードの矢印キーに対する対応を実装することができます。