How can you disable jQuery keyboard navigation when focus is on text input or textarea?

Question

I am using the following code, along with jQuery, to enable keyboard navigation with the left and right arrow keys between various pages of a website. However, I also need to have a form on some of the pages. So, I need for the keyboard navigation to be disabled whenever the visitor is using one of the form fields and then re-enabled when a form field is no longer in use. What can I add to this code to achieve this?

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

Useless Code · Accepted Answer · 2013-02-17T23:24:37.667

2

You could attach events to the fields that toggle a flag on and off to disable it:

$(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;
    });
});

You could also look into using the :focus selector but probably performs worse than just using events to track it.

edited Feb 17 '13 at 23:24

answered Feb 17 '13 at 23:18

Useless Code

12,123
5
35
40

Thanks, this also seems to work well. I don't know enough about Javascript or jQuery to know whether the above solution or yours is better in any way. So, in the interest of finding some reason to award one or the other answer, I am awarding the above solution simply because it was the first answer and seems to work well. – user981178 Feb 17 '13 at 23:28
@user981178 This one will perform better, unbinding/rebinding causes a lot of overhead, just updating a variable and checking it in the handler has very little overhead. Could I at least get an up-vote out of it? – Useless Code Feb 17 '13 at 23:40
I'll +1 your answer - it is less overhead. – kinakuta Feb 18 '13 at 00:06

kinakuta · Answer 2 · 2013-02-17T23:20:29.713

How about unbinding the handler on focus of the input and binding it again on blur:

$(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);
    });
});

Here's a jsfiddle to demonstrate (be sure to click on the 'result' area to give it focus for the document binding to work.

score -1 · Answer 3 · edited May 23 '17 at 10:29

-1

A little late to the party, but had similar issue.
I found the answer in this related question to be a bit more straightforward and easier to maintain and update for future needs.

[edited]

To apply with Kongi's request:

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

edited May 23 '17 at 10:29

Community

1
1

answered Jan 21 '16 at 09:36

Emil Devantie Brockdorff

4,724
12
59
76

How can you disable jQuery keyboard navigation when focus is on text input or textarea?

3 Answers3