Javascript event handler on body but not on input

Question

I have the following event handler

document.addEventListener('keydown', handleBodyKeyDown, false);

HOW DO i prevent it from occurring when inside a input box

Answer 1

Within your handleBodyKeyDown function, check if

 event.target.tagName.toUpperCase() == 'INPUT'

(or 'TEXTAREA').

Note: For older versions of IE, use event.srcElement.tagName.

Like so:

document.addEventListener('keydown', handleBodyKeyDown, false);

function handleBodyKeyDown(event)
{
    var e = event || window.event,
        target = e.target || e.srcElement;

    if (target.tagName.toUpperCase() == 'INPUT') return;

    // Now continue with your function
}

---

P.S. Why are you using addEventListener if you have jQuery on the page? In jQuery, all of this gets sorted out for you:

$(document).on('keydown', ':not(input)', function(e)
{
    // Your code goes here...
});

Answer 2

In your handleBodyKeyDown method, check to see if the event originated on an input element:

function handleBodyKeyDown(event) {
    if (event.target.tagName.toUpperCase() === 'INPUT') {
        return; // do nothing
    }

    // do the rest of your code
}

Note that the toUpperCase call is necessary because the conditions that determine the case of the tagName property are quite complicated and sometimes all but uncontrollable.

See event.target at MDN.