Question

我使用以下代码和jQuery，在网站的各个页面之间使用左右箭头键启用键盘导航。但是，我还需要在某些页面上有一个表单。因此，我需要在访问者使用其中一个表单字段时禁用键盘导航，然后在表单字段不再使用时重新启用。我可以在此代码中添加什么来实现此目的？

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

Answer 1

您可以将事件附加到打开和关闭标志的字段以禁用它：

$(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选择器，但可能比使用事件跟踪它更糟糕。

Answer 2

如何解决输入焦点上的处理程序并在模糊上再次绑定它：

$(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来演示（请务必点击“结果”区域，使其专注于文档绑定工作。

Answer 3

派对有点晚了，但也有类似的问题我在这个相关问题中发现the answer更加简单明了，更容易维护和更新以满足未来需求。

<强> [编辑]

申请Kongi的请求：

$(document).on("keydown", function (e) {
    if (e.which === 8 && !$(e.target).is("input, textarea")) {
        e.preventDefault();
    }
});

当焦点在文本输入或textarea上时，如何禁用jQuery键盘导航？

3 个答案: