0

次のコードをjQueryとともに使用して、Webサイトのさまざまなページ間で左右の矢印キーを使用してキーボードナビゲーションを有効にします。ただし、一部のページにもフォームが必要です。そのため、訪問者がフォームフィールドのいずれかを使用しているときは常にキーボードナビゲーションを無効にし、フォームフィールドが使用されなくなったときに再度有効にする必要があります。これを実現するために、このコードに何を追加できますか？

$(function() {
      $(document).keyup(function(e) {
        switch(e.keyCode) {
          case 37 : window.location = $('.prev').attr('href'); break;
          case 39 : window.location = $('.next').attr('href'); break;
        }
      });
    });
4

3 に答える 3

2

フラグのオンとオフを切り替えるフィールドにイベントを添付して、フラグを無効にすることができます。

$(function() {
    var navEnabled = true;

    $(document).keyup(function(e) {
        if (navEnabled) {
            switch(e.keyCode) {
                case 37 : window.location = $('.prev').attr('href'); break;
                case 39 : window.location = $('.next').attr('href'); break;
            }
        }
    });

    $('.disableNav').bind('focus', function (event) {
        navEnabled = false;
    }).bind('blur', function (event) {
        navEnabled = true;
    });
});

：focusセレクターの使用を検討することもできますが、イベントを使用して追跡するよりもパフォーマンスが低下する可能性があります。

于 2013-02-17T23:18:48.370 に答える
1

入力のフォーカスでハンドラーのバインドを解除し、ぼかしで再度バインドするのはどうですか？

$(function () {
    var arrowNav = function (e) {
        switch (e.keyCode) {
        case 37:
            window.location = $('.prev').attr('href');
            break;
        case 39:
            window.location = $('.next').attr('href');
            break;
        }

    };

    $(document).on('keyup', arrowNav);

    $('#myInput').focus(function () {
        $(document).off('keyup', arrowNav);
    });
    $('#myInput').blur(function () {
        $(document).on('keyup', arrowNav);
    });
});

これがデモンストレーションするjsfiddleです（ドキュメントバインディングが機能するようにフォーカスを与えるには、必ず「結果」領域をクリックしてください。

于 2013-02-17T23:12:38.493 に答える
-1

パーティーに少し遅れましたが、同様の問題がありました。この関連する質問の答え
は、もう少し簡単で、将来のニーズに合わせて保守および更新するのが簡単であることがわかりました。

[編集]

Kongiのリクエストに応じて申請するには：

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});
于 2016-01-21T09:36:04.103 に答える