I am currently using a switch to trigger some code when a key is pressed. This isn't the exact code, but its basically what I am using (this is just for the sake of keeping it short and simple on here.)

$(document).keydown(function(e) {
switch(e.keyCode) { 

case 39:
e.preventDefault();
    alert("Arrow Key");

break;

case 37:
   e.preventDefault();
    alert("Arrow Key");
}
});

How can I prevent the events from firing when an input box is in focus?

I am currently using a switch to trigger some code when a key is pressed. This isn't the exact code, but its basically what I am using (this is just for the sake of keeping it short and simple on here.)

$(document).keydown(function(e) {
switch(e.keyCode) { 

case 39:
e.preventDefault();
    alert("Arrow Key");

break;

case 37:
   e.preventDefault();
    alert("Arrow Key");
}
});

How can I prevent the events from firing when an input box is in focus?

• javascript
• jquery
• event-handling
• jquery-events

• 1 what about this doesn't work? do you need to also call e.stopPropagation() ? – Dan Beam Commented Nov 13, 2010 at 8:56

3 Answers 3

I think you mean that you want to do e.preventDefault() only if the target element was not an input tag. You can do this like this:

$(document).keydown(function(e) {
    if (e.target.nodeName.toLowerCase() !== 'input') {
        switch(e.keyCode) { 
            case 39:
                e.preventDefault();
                alert("Arrow Key");

                break;

            case 37:
                e.preventDefault();
                alert("Arrow Key");
        }
    }
});

e.target is the element where the event originated. Alternatively, you can use jQuery's event delegation API:

$(document).delegate(':not(input)', 'keydown', function(e) {
    switch(e.keyCode) { 
        case 39:
            e.preventDefault();
            alert("Arrow Key");

            break;

        case 37:
            e.preventDefault();
            alert("Arrow Key");
    }
});

Edit Updated my answer to do "not an input" rather than "is an input" checks.

You can use document.activeElement which returns the currently focused element.

Brief doc from the MDN:

Returns the currently focused element, that is, the element that will get keystroke events if the user types any. This attribute is read only.

That is, in order to prevent keystroke events from firing when input is in focus, you can just ignore keystroke events handling when the focused element is an input

if (!$(document.activeElement).is("input"){ /* handle keystroke events here */ }

There may be a more elegant way but I would do something like this:

var inputHasFocus = false;
$("#some_input_id").focusin(function () {
    inputHasFocus = true;
}).focusout(function () {
    inputHasFocus = false;
});

and then use that in your case statement.