I am building something with keyboard shortcuts e.g. you press Ctrl+m to open a menu. I use jQuery and the jwerty plugin for that, this looks like the following code:

jwerty.key('m', function () {
    toggleMenu();
});

Tapping the "m" key triggers the toggleMenu function.

Now I was wondering how to prevent this function from being triggered while a user is typing in an input field or textarea.

I am building something with keyboard shortcuts e.g. you press Ctrl+m to open a menu. I use jQuery and the jwerty plugin for that, this looks like the following code:

jwerty.key('m', function () {
    toggleMenu();
});

Tapping the "m" key triggers the toggleMenu function.

Now I was wondering how to prevent this function from being triggered while a user is typing in an input field or textarea.

• javascript
• jquery

Share Improve this question Follow asked May 22, 2013 at 18:52 WolfrWolfr 5,16444 gold badges2727 silver badges3232 bronze badges 2

• I found this in documentation in Git. If you're binding to a selector and don't need the context, you can ommit it: jwerty.key('⌃+⇧+P/⌘+⇧+P', function () { [...] }, 'input.email', '#myForm'); Give it a try and let us know. – Selvakumar Arumugam Commented May 22, 2013 at 18:59
• function toggleMenu(){alert('ok');} jwerty.key('m', toggleMenu, "body:not(input)"); this should work but doesn't as it fires even in the input – dt192 Commented May 22, 2013 at 19:21

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

You can check if the active element is the body element. If it is, no inputs are focused.

var nothingIsFocused = document.activeElement === document.body

if (nothingIsFocused) {
  ...
}

I've never used jwerty, but I'd suggest:

jwerty.key('m', function (e) {
    if (e.target.tagName.toLowerCase() !== 'input') {
        toggleMenu();
    }
});

This tests the target of the event, and, if it's not an input, calls the toggleMenu() function; if it is an input, it does nothing (though you could explicitly return false if you'd prefer).

To account for textarea, as I really should have done, the above could be extended (to add another clause to the if assessment, or the following, switch-based approach could be taken:

jwerty.key('m', function (e) {
    switch (e.target.tagName.toLowerCase()) {
        case 'input':
        case 'textarea':
            break;
        default:
            toggleMenu();
            break;
    }
});

If the target-element is either an input or textarea, pressing m does nothing, whereas if not either of those two elements the default state is entered and toggleMenu() is called.

You can use the :focus selector provided by jQuery (and some browsers) and the is function to test if an item has focus:

$(".my-thing").is(':focus')

One way would be to add another event handler on your inputs and textareas which calls event.stopPropagation() (or if you use jQuery, return false). That way that event handler will get triggered first, and it will prevent the event from "propagating" up to your existing handler.

Another option would be to check the event inside your existing handler to see if it came from an input/textarea (see the other answers if you want to take this approach; if you care about (really) old browser backward parability you'll want to use David's answer, as activeElement isn't supported by old browsers: Which browsers support document.activeElement?).