Skip to content

Instantly share code, notes, and snippets.

@ccampbell
Created October 13, 2012 17:24
Show Gist options
  • Save ccampbell/3885446 to your computer and use it in GitHub Desktop.
Save ccampbell/3885446 to your computer and use it in GitHub Desktop.
Extends mousetrap.js to add global bindings that still work in form fields. Just include this js after mousetrap.
/**
* adds a bindGlobal method to Mousetrap that allows you to
* bind specific keyboard shortcuts that will still work
* inside a text input field
*
* usage:
* Mousetrap.bindGlobal('ctrl+s', _saveChanges);
*/
Mousetrap = (function(Mousetrap) {
var _global_callbacks = {},
_original_stop_callback = Mousetrap.stopCallback;
Mousetrap.stopCallback = function(e, element, combo) {
if (_global_callbacks[combo]) {
return false;
}
return _original_stop_callback(e, element, combo);
};
Mousetrap.bindGlobal = function(keys, callback, action) {
Mousetrap.bind(keys, callback, action);
if (keys instanceof Array) {
for (var i = 0; i < keys.length; i++) {
_global_callbacks[keys[i]] = true;
}
return;
}
_global_callbacks[keys] = true;
};
return Mousetrap;
}) (Mousetrap);
Mousetrap=function(a){var d={},e=a.stopCallback;a.stopCallback=function(b,c,a){return d[a]?!1:e(b,c,a)};a.bindGlobal=function(b,c,e){a.bind(b,c,e);if(b instanceof Array)for(c=0;c<b.length;c++)d[b[c]]=!0;else d[b]=!0};return a}(Mousetrap);
@tombigel
Copy link

Multiple keys does not work in this code.
The following code fix that:

Mousetrap = (function(Mousetrap) {
    var self = Mousetrap,
        _global_callbacks = {},
        _original_stop_callback = Mousetrap.stopCallback;

    self.stopCallback = function(e, element, combo) {
        if (_global_callbacks[combo]) {
            return false;
        }

        return _original_stop_callback(e, element, combo);
    };

    self.bindGlobal = function(keys, callback, action) {
        self.bind(keys, callback, action);
        var i;
        if (Array.isArray(keys)){
            for (i = 0; i < keys.length; i++){
                _global_callbacks[keys[i]] = true;
            }
        }else{
            _global_callbacks[keys] = true;
        }
    };

    return self;
} (Mousetrap));

@ccampbell
Copy link
Author

Thanks, I have updated the code to fix the bug.

@firedev
Copy link

firedev commented Oct 27, 2012

Thanks! Works.

@firedev
Copy link

firedev commented Oct 28, 2012

Would be cool to have this included in the main repo and get a minimized version too

@tombigel
Copy link

+1 to what @firedev said

Using instanceof Array is known to be problematic -
Please consider this http://perfectionkills.com/instanceof-considered-harmful-or-how-to-write-a-robust-isarray/

@mnazim
Copy link

mnazim commented Nov 23, 2012

Doesn't work for me. Am I doing it right?

<html>
  <head>
    <script src="mousetrap.min.js"></script>
    <script src="mousetrap-global.min.js"></script>
    <script>
      Mousetrap.bind('s', function() { alert(2); return false; });
    </script>
  </head>
  <body>
    Hello
    <input type="text" >
  </body>
</html>

@kinabalu
Copy link

No, you're not. It's Mousetrap.bindGlobal

@mnazim
Copy link

mnazim commented Nov 27, 2012

Thanks. Didn't notice bindGlobal

@nekloth
Copy link

nekloth commented Apr 5, 2013

Hi, CAn I ask you what kind of licence you have on this code ? I'd like to use this in a professional/commercial environment, and I need to be sure of the licence type...

Thanks

@RocAlayo
Copy link

There is no longer a need for this code, now you can do:

Mousetrap(document.body).bind('h', function () { console.log("hello!!!!"); });

Since now Mousetrap(DOMElement) has de following functionallity:

Any event triggered from a child element of the element you bound to will bubble up. This means in the example above, if you press command+s in a text area inside your form the callback will still fire.

So the default rules about events not firing inside of a textarea or input do NOT apply when Mousetrap is attached to a specific element.

@harry-008
Copy link

hi ,
i want to use mousetrap.js on text field and text area and want convert the word into some other word
for example :-
when we press a and it will convert it into other word
how can we do this with mousetrap.js

@harry-008
Copy link

hi,
on text field , when i press a or shift+a or g + a etc and it will convert into some other word . you can say translator.
how to do this on text field .

@sshmyg
Copy link

sshmyg commented Sep 15, 2017

Doesn't work macOS, chrome latest

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment