Feature request:

If I bind a callback to, say, the A key, and then I hold down the A key, the callback will be called many times, rapidly, until I release the A key.

It would be nice to have an option to have such a callback only fire once.

Strangely enough, I decided I wanted something like this at almost the same time as @evitolins (see #109).

You said you'd prefer this as an extension; but I figured it couldn't hurt to submit the pull request and see what you think. I also added a little tester to your 'peanut butter' UI.

I'd be interested in using this, but I need some sort of "scoping", i.e. hotkeys would dispatch differently based on what element is highlighted.

I've wanted this for a while: adding the ability for Mousetrap to target specific elements rather than the entire document. This is really useful if, e.g., you want to provide keyboard shortcuts to a specific <textarea> or an element with the contenteditable attribute, but don't want these shortcuts to affect the rest of the document.

I've made the change backwards compatible with the way the library works by default. I.e., Mousetrap.bind() still works at the document level. To handle keyboard shortcuts only bubbling from from a specific element, you use wrap():

Mousetrap.wrap(element).bind('sequence', callback);

I kind of wanted the API like this:

Mousetrap(element).bind('sequence', callback);

...but that would have involved more code.

I know it looks like a big diff, but that's mainly because of the indentation changes. To see a cleaner diff, you can use git diff --ignore-space-change.

Add a generic mod modifier, which is an alias for command on OS X, and ctrl everywhere else.

mod might not be the best name for it, so I'm open to suggestions.

I've added an awesome feature that automatically creates a lightbox with the keyboard shortcuts currently registered and is bound to ?. It looks pretty much the same as gmail's lightbox.

I've basically added a few "public" methods to show, hide and toggle this help and bound ? on start and on reset. A user can still override it. I achieve this by injecting the CSS (only if invoked) to the start of the head declaration and than injecting a div that implements a simple lightbox with a title and div table. The lightbox shows all the shortcuts, and if available an explanation, which is either specified by a new fourth argument to bind (ye, kinda hacky I know) or if none taking the name of the callback function.

The CSS is injected to be the first child of the head directive to allow people to override the styling of the lightbox and all the other elements. Basic documentation for this is here: https://github.com/Sveder/mousetrap/wiki/Help-Overlay-CSS-Style-Overriding

I tried the examples on demo page using standard Turkish (Q) layout, but some of them didn't work. (Namely, '$' and '*'.)

Now I tried them again and somehow made them work. $ character is typed using AltGr+4 combination, but it didn't work with it or the US variant Shift+4; however it works for AltGr+Shift+4.

On the other hand, asterisk character has a seperate key for itself on Turkish layout. But it also doesn't work. It works by combining Turkish and US layouts and pressing AltGr+Shift+8 --and followed by 'a', of course, for the example to work.

Define a key which is valid for either ctrl or command key presses, so it can be used either in PC or Mac. Instead of ['command+k', 'ctrl+k'], it could be 'comctrl+k'

I'm trying to add a custom shortcut in gmail through a chrome extension.

Without Mousetrap one can add a keydown in every iframe as described here: http://stackoverflow.com/questions/9424550/how-can-i-detect-keyboard-events-in-gmail

This works fine. However if I use the same approach and do

Mousetrap.bind('4', function() { alert('343'); });

It's not working. I suspect this is because Mousetrap will only add the eventlistner to the toplevel document.

Any pointers?

On my browser (Chrome 20.0.1132.47 on Fedora 17) and a US keyboard:

1. Browse to the demo at http://craig.is/killing/mice
2. Press and hold the shift key
3. Press and hold the '4' key
4. The "$" item correctly illuminates
5. Release the shift key. The "4" item incorrectly illuminates. "4" was never typed.

Hi,

I'm developing some features on an app, and I have them working on Chrome, but now I am testing on Firefox I am getting an error.

The issue seems to be in the _belongsTo() function which is recursive. After several iterations, it calls itself with the element parameter as null - ie element.parentNode is null.

I've not figured out what is wrong, but I am suspecting it is something to do with the webcomponents implementation of shadow-dom - or lack thereof - that is certainly one significant difference between chrome and firefox, and since thie _belongsTo() function seems to be ascending the DOM tree, then perhaps it is related.

It'd be great to get some opinion of how this problem can be worked-around.

In the meantime, I'll see if I can reduce my code into a simple test case.

Thanks,

Max.

webcomponentsjs#0.5.2 mousetrap#1.5.2 polymer#0.5.5

stack trace :

console.trace(): debugger eval code:1 _belongsTo() mousetrap.js:421 _belongsTo() mousetrap.js:421 _belongsTo() mousetrap.js:421 _belongsTo() mousetrap.js:421 _belongsTo() mousetrap.js:421 _belongsTo() mousetrap.js:421 Mousetrap.prototype.stopCallback() mousetrap.js:970 _fireCallback() mousetrap.js:601 Mousetrap/self._handleKey() mousetrap.js:666 Mousetrap.prototype.handleKey() mousetrap.js:983 _handleKeyEvent() mousetrap.js:726 invoke() webcomponents.js:1070 dispatchBubbling() webcomponents.js:1024 dispatchEvent() webcomponents.js:998 dispatchOriginalEvent() webcomponents.js:953

Right now, there is no way to remove event listeners which can lead to memory leaks. This will create a function that will remove the event listeners.

mousetrap is basically an abandoned project. Lots of unsolved issues and unmerged pull requests. I want to know are there any better alternatives? Thanks.

Example: I have two shortcuts: i which will navigate my page and f+i which will add a new item to the page. If I just press i while selected on an item on the page, it will match with the f+i shortcut because that is saved under the self._callbacks[i] even though it is a combination.

https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/which

https://github.com/ccampbell/mousetrap/blob/2f9a476ba6158ba69763e4fcf914966cc72ef433/mousetrap.js#L721

            if (typeof e.which !== 'number') {
                e.which = e.keyCode;
            }

should becomes something like

const charCode = (typeof e.which == "number") ? e.which : e.keyCode;

and charCode should be passed to methods later instead of using e.which everywhere.

Chrome is showing an "issue" because Mousetrap uses navigator.platform which they plan to remove support for in the future.

More information in this link https://blog.chromium.org/2021/05/update-on-user-agent-string-reduction.html

Suggestion for fix https://web.dev/user-agent-client-hints/

Screenshot of issue

I want to use ctrl+tab in my electronjs app. So it is not a browser to interrupt with tab changing shortcut. However when I'm inside a text area it doesn't fire at all. Other shortcuts without tab do. How do I bind the whole document ?

<script>
    Mousetrap.bind(['command+tab', 'ctrl+tab'], function() {
       alert('command tab or control tab);

        // return false to prevent default browser behavior
        // and stop event from bubbling
        return false;
    });
</script>