Keypress but not when input or textarea is in focus

Question

I'm using the code below :

$(document).keypress(function (e) {
    if (e.which === 68 || e.which === 100) {
        doStuff();
    }
});

What i want is to capture the key 'D' as a shortcut to a function in my page. Problem is , this page has inputs and textarea controls and when i'm'typing on this controls, the 'doStuff()' function is called.

How to avoid it ? I want the key 'D' capture only if the user is not typing anything in editable controls.

Thanks !

Answer 1

Alternatively to e.target , you could test if the current active element is an input or textarea:

$(document).keypress(function (e) {
  var focussedTag = document.activeElement && document.activeElement.nodeName;
  if( focussedTag === 'INPUT' || focussedTag === 'TEXTAREA' ) {
    return;
  }
  if (e.which === 68 || e.which === 100) {
    doStuff();
  }
} );

Fiddle: https://jsfiddle.net/e1qtapo6/

Answer 2

Add another check before executing the 'doStuff' function. Check if the user has any input element in focus, and if true then only execute the statement.

Something like this:

$(document).keypress(function (e) {
    if ( (e.which === 68 || e.which === 100) && (!$(input).is(":focus")) ) {
        doStuff();
    }
});

Answer 3

$(document).on('keypress', ':not(:input)', function (e) {
    if (e.which === 68 || e.which === 100) {
        doStuff();
    }
});

Answer 4

Another one -

  $(document).keypress(function (e) {
    if (e.which === 68 || e.which === 100) {
        var _node = e.target.nodeName;
        if( _node !== "INPUT" && _node !== "TEXTAREA" ){
          doStuff();
        }
    }
  });