Search code examples
javascriptdom-eventskeypressonkeypressevent-propagation

Excluding form fields from keypress handler assigned to body


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?)


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
        }
    };