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

DDD
リリース: 2024-10-30 03:58:02
オリジナル
707 人が閲覧しました

How do I Bind Arrow Keys in JavaScript and 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!