How to capture keyboard arrows with JS in some areas but not others

Question

I've read an excellent question/answer here: Binding arrow keys in JS/jQuery

but now I have this problem: while I can use arrow keys to navigate through various selections on my site, I can no longer edit things in text boxes the way I am used to, because my arrows are not working the way I expect anymore.

i.e. one first page that gets loaded via AJAX, I can navigate my "selections" (i.e. images) via arrow keys. Then I save my selection (image), and go to the 2nd page that is also loaded via AJAX.

But, arrow bindings are still in effect, so when I try to use Right, Left, Home, End, PgUp, PgDn arrows to navigate the cursor in a text box, to for example, correct a misspelling, nothing happens because I have prevented the default behavior to avoid various page elements being shifted on page 1 .. .

Is there a way to solve this?

My Code:

Not sure it will help here .. and not sure how I can help you help me, but here goes:

On Page 1:

    <script type="text/javascript">
    /*************************************/
    /* selection navigation via keyboard */
    /*************************************/
    $(document).keydown(function(e) {
        switch(e.which)
        {
        case 37:  $("#selectPrevious").click();break;
        case 39:  $("#selectNext").click();break;
        case 33:  $("#jump10Back").click();break;
        case 34:  $("#jump10Forward").click();break;
        case 36:  $("#jumpFirst").click();break;
        case 35:  $("#jumpLast").click();break;
        default: return;
        }
        e.preventDefault();
    });
    </script>

and apparently this key assignment does not get erased later, as I navigate to page 2. I don't want binding to be in effect on page 2. To be clear .. there is a Main page that stays loaded at all times, and Page 1 gets loaded via AJAX, then it gets replaced by page 2 via AJAX.

Yes. We need to see your code. What do you have so far? – random_user_name Jul 22 '14 at 21:21 — random_user_name, Jul 22 '14 at 21:21
zerkms: that seems to work. feel free to make an answer – Dennis Jul 22 '14 at 21:48 — Dennis, Jul 22 '14 at 21:48

stekhn · Answer 1 · 2014-07-22T21:59:47.937

Maybe you could bind your event handler to a more specific element than document. If AJAX loading is done in two different containers, i.e. #page1 and #page2, you could just bind the key stroke to one of them:

$("#page1").keydown(function(e) {
    // your code
})

Another idea would be unbinding the event listeners, when the second page gets loaded. Therefor you could use jQuery's .off() or .unbind() method:

if (loaded) {
    (document).unbind("keydown");
}

This will unbind all keydown events for document. If you want to make the unbinding more specific, you should make a named function out of your anonymous handler function;

function handleKeydown(e) {
    switch(e.which)
    {
    case 37:  $("#selectPrevious").click();break;
    case 39:  $("#selectNext").click();break;
    case 33:  $("#jump10Back").click();break;
    case 34:  $("#jump10Forward").click();break;
    case 36:  $("#jumpFirst").click();break;
    case 35:  $("#jumpLast").click();break;
    default: return;
    }
    e.preventDefault();
});

// Bind the handler
$(document).keydown(handleKeydown);

// Unbind the handler
if (page2) {
   $(document).unbind("keydown", handleKeydown);
}

score 0 · Accepted Answer · answered Aug 20 '14 at 22:10

0

from zerkms: "Just check the event source"

I checked event source and that worked for me.

answered Aug 20 '14 at 22:10

Dennis

7,907
11
65
115

How to capture keyboard arrows with JS in some areas but not others

2 Answers2