Home/ Questions/Q 6897453
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T07:10:15+00:00

<body> <div>Sample div</div> <input type=’text’/> </body> $(document).delegate(‘body *:not(input)’, ‘keyup’, function(e){ if((e.keyCode || e.which) ==

  • 0
<body>
  <div>Sample div</div>
  <input type='text'/>
</body>

$(document).delegate('body *:not(input)', 'keyup', function(e){
    if((e.keyCode || e.which) == 39){ //right arrow
        $('#next_image').click();
    }
    if((e.keyCode || e.which) == 37){ //left arrow
        $('#prev_image').click();
    }
}

I’m using jQuery Cycle library to setup slideshow. It’s more like a photo album, where you can use keyboard shortcuts to do some stuff. So, the slideshow is the whole page, which also contains input fields. Hence, when you are writing a text inside of input field and try to move cursor with keyboard (left and right arrow buttons), it would fire the event and scroll to the next/prev image.

Any ideas on how to enable keyup events on everything BUT the input field? Obviously, current selector doesn’t work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you want to stick with .delegate() instead of the currently-favored .on():

    $(document).delegate(':not(input)', 'keyup', function (e)
{
    if (e.which === 39) $('#next_image').click();
    else if (e.which === 37) $('#prev_image').click();
});
    • jQuery normalizes key code information, so you only need to check event.which

    • If you did have to check keyCode and which, (e.keyCode || e.which) == 39 would not work properly, since || will evaluate to the first truthy operand, or the second operand if both are falsy. To put it differently: you’d have to check each one separately, like this:

      if (e.which === 39 || e.keyCode === 39)
    • It’s generally better to use === instead of ==. See Which equals operator (== vs ===) should be used in JavaScript comparisons?

    doesn’t work… it’s still firing the keyup event inside of <input>

    Ah yes. I’m thinking it’s because of event bubbling.

    I’ve seen it solved using an extra event handler (imgur caption boxes in the gallery):

    $('input').live('keyup', function (e) {
    if(!e.ctrlKey && !e.altKey && !e.metaKey) {
        if(e.keyCode==37 || e.keyCode==39 || e.keyCode==13) {
            e.stopPropagation();
        }
    }
    return true;
});

    http://jsfiddle.net/mattball/DQusL/

    • 0