ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript と jQuery で矢印キーストロークをキャプチャするにはどうすればよいですか?

JavaScript と jQuery で矢印キーストロークをキャプチャするにはどうすればよいですか?

Patricia Arquette
リリース: 2024-10-29 08:50:02
オリジナル
1123 人が閲覧しました

How Can I Capture Arrow Keystrokes in JavaScript and jQuery?

JS および jQuery を使用した矢印キーストロークのキャプチャ

JavaScript および jQuery で関数を矢印キーにバインドすることは、キーボード ナビゲーションの一般的な要件です。 jQuery の js-hotkey プラグインは組み込みのバインド関数を拡張しますが、矢印キーのサポートがありません。

これに対処するための簡単な解決策は次のとおりです。

<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>
ログイン後にコピー

このコードは次のようにキャプチャします。 switch ステートメントを使用した、左、上、右、下矢印キーのキーストローク。それぞれのケースで必要なアクションを定義できます。

what プロパティをサポートしていないブラウザー (IE8 など) の場合は、関数本体を次のように変更することに注意してください:

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

        // ...
    }
};</code>
ログイン後にコピー

あるいは、最新のブラウザの場合、次の例に示すように、KeyboardEvent.key プロパティを使用して矢印キーを検出できます。

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

        // ...
    }
};</code>
ログイン後にコピー

このコードを実装すると、JavaScript で関数を矢印キーに簡単にバインドできます。または jQuery アプリケーション。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート