Detect text-input elements in javascript

Question

In JavaScript, I would like to detect some key presses. But I want to ignore those keypresses that the user makes while typing into some kind of text input area. How can I achieve that?

I have tried

if (document.activeElement.nodeName == 'INPUT') {
    return;
}
if (document.activeElement.nodeName == 'TEXTAREA') {
    return;
}

which works in those two elements; but for example, the email-compose element in Inbox by Gmail is a DIV container. Do I want to exclude all active DIVs, though? Are there other HTML elements that are used to obtain key input? Is there any much different method that I may have overlooked?

Answer 1

First of all, I'd use jquery to normalize your events. From there, try testing $(event.target).is() :

Here is an example that has a div where all events are captured. Events for <input> elements are ignored, while others are not, including events for a <textarea> :

 $('#mydiv').keypress(function(event) { if ($(event.target).is('input')) { return true; } else { console.log('not an input box'); return false; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mydiv"> <input> <span>Spanning area</span> <textarea></textarea> </div>