How do I stop a keydown event interfering with form fields?

Question

I've bound some events to happen on left and right arrow key press like so:

$(document).keydown(function(e) {
    switch(e.which) {
        case 39: $("#next").trigger('click');
        break;

        case 37: $("#prev").trigger('click');
        break;              
    }
});

However, obviously if you are in a form and press left and right to move through text, these events fire.

How do I change this so that that doesn't happen?

Answer 1

You could check the target of the event (more information here)

$(document).keydown(function(e) {
    //var target = (e.target) ? e.target : e.srcElement; // IE uses srcElement
    // jQuery seems to handle this, so e.target should be fine

    if(e.target.nodeName != 'INPUT') {
        switch(e.which) {
            case 39: $("#next").trigger('click');
            break;

            case 37: $("#prev").trigger('click');
            break;              
        }
    }
});

or you could prevent the event from bubbling up by attaching an event handler to the input elements:

$('input').keydown(function(e) {
    e.stopPropagation();
});

Update:

Likewise you might want to test the node name for TEXTAREA.

Here is an example: http://jsfiddle.net/86CKw/1/

Answer 2

This is the most elegant solution I could find:

$(document).ready(function() {
  $(document).keypress(function() {
    if ( this !== event.target && (/textarea|select/i.test( event.target.nodeName ) || event.target.type === "text") ) {
      return;
    }

    // deal with the events here
    ...

  }); 
});