JavaScript と jQuery で矢印キーをバインドするにはどうすればよいですか?

JavaScript と jQuery での矢印キーのキーバインド

ユーザー インタラクションを強化するには、多くの場合、関数を特定のキーにバインドする必要があります。矢印キーはナビゲーションによく使用されますが、JavaScript や jQuery に統合するのは難しい場合があります。

jQuery ソリューション

一方、js-hotkey プラグインは強化されたキーバインドを提供します。機能がありませんが、矢印キーのサポートがありません。ただし、jQuery の keydown イベント ハンドラーは代替ソリューションを提供します。

<code class="js">$(document).keydown(function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

純粋な JavaScript ソリューション

JavaScript の onkeydown イベントを利用することは、矢印キーをキーバインドするもう 1 つのアプローチです。

<code class="js">document.onkeydown = function(e) {
    switch (e.which) {
        case 37: // Left
            // Insert your left arrow key code
            break;
        case 38: // Up
            // Insert your up arrow key code
            break;
        case 39: // Right
            // Insert your right arrow key code
            break;
        case 40: // Down
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
};</code>

ブラウザ間の互換性

IE8 などの古いブラウザとの互換性を得るには、e = e || を追加します。ウィンドウ.イベント; switch(e.that || e.keyCode) { 関数 body の前。

Modern Solution

KeyboardEvent.this は現在非推奨です。より現代的なアプローチは、KeyboardEvent.key:

<code class="js">document.addEventListener('keydown', function(e) {
    switch (e.key) {
        case 'ArrowLeft':
            // Insert your left arrow key code
            break;
        case 'ArrowUp':
            // Insert your up arrow key code
            break;
        case 'ArrowRight':
            // Insert your right arrow key code
            break;
        case 'ArrowDown':
            // Insert your down arrow key code
            break;
    }
    e.preventDefault();
});</code>

を使用することです。

以上がJavaScript と jQuery で矢印キーをバインドするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。