Excluding form fields from keypress handler assigned to body

dom-events, event-propagation, javascript, keypress, onkeypress

Solution

It would be easier simply to check which element triggered the event in your keypress handler and filter out input elements:

document.onkeypress = function(evt) {
    evt = evt || window.event;
    var target = evt.target || evt.srcElement;
    if ( !/INPUT|TEXTAREA|SELECT|BUTTON/.test(target.nodeName) ) {
        // Do stuff
    }
};

Problem

I have a `keypress` handler on a web page assigned to the body element. I really do want it to be active anywhere in the web page. Or so I thought. The `keypress` events in textual input forms also activate the body handler, which makes sense, but which I don't want. Ideally, I'd like to keep the `keypress` handler assigned to the body element and somehow exclude just the input forms. Is there any way I can stop the event at the input level and prevent it from propagating to body? (Or is that even the right way to look at HTML DOM events?)

Original source