JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで矢印キーの押下を検出する方法

JavaScriptで矢印キーの押下を検出するには、onkeydownイベントを使用します。

各キーには固有のキーコードが割り当てられており、矢印キーの場合は次の通りです。左矢印キーは「37」、上矢印キーは「38」、右矢印キーは「39」、下矢印キーは「40」です。押されたキーのkeyCodeをswitch文などで判定することで、どの矢印キーが押されたかを識別できます。

サンプルコード

以下に具体的な実装例を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
</body>
<script>
   document.onkeydown = function (event) {
      switch (event.keyCode) {
         case 37:
            console.log("Left key is pressed.");
            break;
         case 38:
            console.log("Up key is pressed.");
            break;
         case 39:
            console.log("Right key is pressed.");
            break;
         case 40:
            console.log("Down key is pressed.");
            break;
      }
   };
</script>
</html>

上記のプログラムを実行するには、ファイル名を任意の名前（例：index.html）で保存します。その後、VS Codeエディタで該当ファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

実行結果

ここでは上矢印キーを押した場合の例を示します。コンソールには以下のような出力が表示されます。

JavaScriptで矢印キーの押下を検出する方法

  1. 【JavaScript入門】押された文字キーを判定して表示する方法をわかりやすく解説

    ユーザーがどの文字キーを押したのかを確認するには、window.eventとkeyCodeを組み合わせて使用します。本記事では、押されたキーの文字をアラートで表示するサンプルコードを交えて、実装手順と実行結果まで詳しく解説します。 サンプルコード テキストボックスに対してonkeypressイベントを設定し、押されたキーのコード値から対応する文字を取り出しています。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=w

  2. JavaScriptでEnterキーの押下イベント（keypress）を検出する方法

    Webアプリケーションでは、ユーザーがEnterキーを押したタイミングで特定の処理を実行したい場面がよくあります。例えば、検索フォームで入力後に自動で検索を実行したり、チャット画面でメッセージを送信したりするケースです。 JavaScriptでは、onkeypressイベントとEnterキーのキーコード「13」を組み合わせることで、簡単にEnterキーの押下を検出できます。 基本的な実装方法 まず、HTML側のinput要素にonkeypress属性を設定し、キーが押されたときに呼び出す関数を指定します。 onkeypress=yourFunctionName 次に、JavaScript側でイ