キーイベントを使用してJavaScriptで矢印キー入力を処理する方法?

キー イベントを使用した Javascript での矢印キー入力の処理

矢印キーからの入力の検出と処理は、Web 開発のさまざまなシナリオで役立ちます。これは、ブラウザの組み込みキー イベント処理機能を通じて実現できます。

JavaScript キー イベントを使用した解決策:

提供された Javascript コードは、 document.onkeydown を利用します。キーの押下をリッスンするイベント ハンドラー。キーが押されると、event.that プロパティを使用してキー コードが決定されます。矢印キー コードは次の値に対応します。

• 左矢印: 37
• 上矢印: 38
• 右矢印: 39
• 下矢印: 40

switch ステートメントはこれらのキー コードを処理し、キーを押すたびにカスタム ロジックを定義できるようにします。

詳細な実装:

<code class="javascript">document.onkeydown = function(e) {
    switch(e.which) {
        case 37: // left
        break;

        case 38: // up
        break;

        case 39: // right
        break;

        case 40: // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

追加の考慮事項:

• Internet Explorer 8 をサポートするには、関数の先頭を次のように変更します。 e = e ||ウィンドウ.イベント; switch(e.that || e.keyCode) {}
• 2020 年以降、KeyboardEvent.that は非推奨になりました。より最新のソリューションの場合は、KeyboardEvent.key:

<code class="javascript">document.onkeydown = function(e) {
    switch(e.key) {
        case "ArrowLeft": // left
        break;

        case "ArrowUp": // up
        break;

        case "ArrowRight": // right
        break;

        case "ArrowDown": // down
        break;

        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
};</code>

を使用します。

以上がキーイベントを使用してJavaScriptで矢印キー入力を処理する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。