7 ms·
Mousetrap: Keyboard shortcuts in Javascript
- achal 14y agoI don't know if this is on purpose, but the "Cmd+Shift+K" binding is not activated by "Ctrl+Shift+K" or "Alt+Shift+K" on non-Macs. Seems to work great otherwise, though.
- craigc 14y agoThanks! Command is bound to e.metaKey so whatever that works out to on PC, but you can specify multiple keys like in the next example, by passing an array.
- mozillarewind 14y agoYou might consider trying an "accel" alias modifier, so that you don't have to specify both Ctrl and Cmd. That's what Mozilla does: https://developer.mozilla.org/en/XUL_Tutorial/Keyboard_Shortcuts https://developer.mozilla.org/en/XUL_Tutorial/Keyboard_Short... If you really do want fine-grained control, for example, so that Cmd works on OS X, but it maps to something else entirely on other platforms, you can still use Ctrl and Cmd.
- rburhum 14y agodid you try the 'Windows' key?
- achal 14y agoThat doesn't seem to work, either. Besides, Command generally maps to Ctrl/Alt on most pieces of software.
- nilliams 14y agoThis is why I love the JavaScript community. Tight little library, great API, brilliant project page. Excellent, shiny, hard. work.
- prezjordan 14y agoThey have a big advantage, you know! When you create a jQuery plugin, you can show everyone - instantly. I feel like desktop applications (and even websites, to a degree) don't have that luxury.
- exogen 14y agoJust in case anyone is confused by this comment, though, this isn't a jQuery plugin.
- cellularmitosis 14y ago"...brilliant project page..." even the URL! craig.is/killing/mice
- andreyf 14y agoVery nice! Wrote something like this one too many times in the past, definitely delighted to replace it with a library in the future, thanks! :)
- Killswitch 14y agoI love you. I really do. This is amazing work.
- jonny_eh 14y agoYou know a library (or whatever) is awesome when you're initial reaction is "I can't believe this didn't exist already". I'll definitely be using this!
- DanielRibeiro 14y agoJohn Resig's jquery.hotkeys do almost all of it (and it is stable enough, as it is 2 years old): https://github.com/jeresig/jquery.hotkeys https://github.com/jeresig/jquery.hotkeys
- morsch 14y agoI checked out of curiosity: jquery.hotkeys is about 1.4kb minified, coincidentally the same size as this library. Of course you'd have to add jquery itself to get the total size, if you weren't already using it.
- danso 14y agoNow there's no excuse to not have a Konami code easter egg on your sites.
- modarts 14y agoI really like the doma.in/name/choice
- loceng 14y agoI wouldn't have noticed it - thanks, made me smile. :)
- kalleboo 14y agoI can't get "$" or "* a" to activate on my Swedish keyboard, where they're typed option-4 and shift-', respectively. Dealing with keyboard-shortcuts and international keyboard is hard, I don't think I've ever gotten an app using ctrl-[ to work right. edit: $ highlights when I type shift-4, while that's actually supposed to produce €
- uvdiv 14y agoOn chrome, 'ctrl-[' triggers a key event with .which, .keyCode, and .charCode all set to 27. 27 is DOM_VK_ESCAPE [1]. On firefox, 'esc' sets .keyCode to 27 [2]. Firefox's 'ctrl-[' sets .which and .charCode to 91 (codepoint for '['), but .keyCode to 0. On both firefox and chrome, plain '[' sets .charCode to 91, as does firefox's 'alt-['. But not 'ctrl-[' on chrome. (which,keyCode,charCode) chrome firefox [ 91 91 91 91 0 91 alt-[ ? 91 0 91 ctrl-[ 27 27 27 91 0 91 esc ? 0 27 0 It's one example out of many, but how do you distinguish such cases, short of enumerating the behavior of every browser (and I guess keyboard layout too)? [1] https://developer.mozilla.org/en/DOM/KeyboardEvent#Virtual_key_codes https://developer.mozilla.org/en/DOM/KeyboardEvent#Virtual_k... [2] I don't know what chrome does, I couldn't convince it to capture an 'esc' or 'alt-['.
- kalleboo 14y agoAnd on my Swedish keyboard you type "[" with alt-8, so when I press ctrl-alt-8, all bets are off.
- natedsaint 14y agoThanks for this, I noticed the same thing on chrome with other tools like codepen.io and wasn't able to figure out why it was happening.
- Suan 14y agoIf anyone is looking for a way to let users enter keycombos which you could then use with Mousetrap, I wrote this: http://suan.github.com/jquery-keycombinator/ http://suan.github.com/jquery-keycombinator/
- lubomir 14y agoThe funny thing is that with my keymap (cs_CZ) the 4 and $ keybindings are reversed.
- Aissen 14y agoDitto here on fr_bepo mapping, with chrome 20.0.1132.47.
- sheraz 14y agoNice hack -- I've been going this as inside of backbone.js app. I have a asset management app that uses keyboard shortcuts to quickly tag, choose, and manage photos. Had I know about this I might have used it rather than bundling it into my views. Nice work!
- ajross 14y agoIt doesn't do modifier key event generation correctly. On a US keyboard, hold down shift and 4 (i.e. type "$"). The second item highlights. Now release shift. The first item highlights, incorrectly, because the library apparently generated a keydown event for "4" when the shift key was released. That's wrong by all standard conventions. Modifier key releases should never synthesize presses.
- deleted 14y ago[deleted]
- craigc 14y agoWhat browser are you using? It works correctly for me using Chrome on Mac. Could you make a ticket on Github?
- ajross 14y agoChrome 20 on linux. Bug submitted: https://github.com/ccampbell/mousetrap/issues/3 https://github.com/ccampbell/mousetrap/issues/3
- craigc 14y agoThank you.
- craigc 14y agoI wonder if this is related to https://github.com/ccampbell/mousetrap/issues/6 https://github.com/ccampbell/mousetrap/issues/6 In which case it should be a pretty painless fix.
- antoko 14y agosame issue on Win7 / FF13 Also affects the "* a" combo if you release shift before releasing 8 then release 8 and press "a" it doesn't recognize the combination (presumably because its reading a key press of 8 in between them)
- 14y ago
- quarterto 14y agoNice, but could do with a bit of preventDefault love, at least for the examples. Firefox on Linux has Ctrl+Shift+K as Web Console, Ctrl+K as (seemingly) Goto Google.
- mihok 14y ago+1 for the url to the project
- bratsche 14y agoThis looks like it's doing basically the same thing that keymaster has already been doing, with an almost identical API: https://github.com/madrobby/keymaster https://github.com/madrobby/keymaster
- jasonmoo 14y agoEverything's already been done everywhere, all the time. Choices are a great thing.
- craigc 14y agoThis offers a few additional things such as supporting Gmail style key sequences, binding keyup events, supporting keys that require the shift modifier using their key name "?", triggering key commands programmatically, etc.
- mcrittenden 14y agoAwesome! I'm super excited about this. I've been using keymaster for my Chrome extension for custom key bindings [1] but it's suffering from two issues: - Lack of "key-sequences" ala Gmail - Bug where focusing on a page having already pushed down a modifier doesn't tell keymaster that the modifier is pushed. For example if you ctrl+tab to a page and keep the control key pushed, then hit an action key (say "f"), then what you really want is to trigger ctrl+f but keymaster doesn't recognize it because it doesn't see ctrl as having been pressed since it was already held down before the page had focus. Looks like Mousetrap fixes both of these issues. Thanks a ton! 1: https://chrome.google.com/webstore/detail/logpjaacgmcbpdkdchjiaagddngobkck https://chrome.google.com/webstore/detail/logpjaacgmcbpdkdch...
- mmahemoff 14y agoI've found Keymaster good in the past, but the project really isn't being maintained. (https://github.com/madrobby/keymaster/issues?direction=desc&sort=created&state=open https://github.com/madrobby/keymaster/issues?direction=desc&...) It would be nice to see an ongoing project for this, with keyboard shortcuts becoming more popular (in use at Twitter, GitHub, and Google Plus for example). I'm planning to add the functionality on my own app soon and will take a look at this.
- jlarocco 14y agoI really hate pages that take control of the keyboard like this. Your website isn't so special to completely change how I use my browser. It might be okay for a game, but in every other case, if my regular bindings don't work, I leave.
- johnsonman 14y agoI agree. Overwriting the close tab and next/previous tab shortcuts causes me a lot of frustration. Thankfully few webpages do it.
- pooriaazimi 14y agoI second that. I mapped a specific trackpad gesture to 'Command-W' (using BetterTouchTools). Now when I perform my crazy gesture on pages like http://www.hnsearch.com/search#request/all&q=hello http://www.hnsearch.com/search#request/all&q=hello or http://try.github.com/levels/1/challenges/1 http://try.github.com/levels/1/challenges/1 , it prints a 'w' in the text bar instead of closing the tab. It really bothers me. It has legitimate uses though, I'm not saying it shouldn't be used. But please use it only where it makes sense.
- crazygringo 14y agoBut I think that's the right solution. For most websites, I will leave. But for web "apps" like Google Docs, or GMail, or my company's internal apps, I want to use application-style keyboard shortcuts like Ctrl+S and Ctrl+T and Ctrl+N. I want Ctrl+N to create a new document inside my application, not a new browser window. The best solution would be to ask users to give permission to a webpage to overwrite native keyboard shortcuts for their own uses.
- nilliams 14y agoAgree, probably the best example where it's okay to offer 'tip' type dialogs on opening the app "We've setup keyboard shortcuts for you, would you like to use them? (examples)". (Saving preferences for future visits).
- inexplicable 14y ago
- Keithamus 14y agoThis looks very similar to a library I created/am working on: http://keithcirkel.co.uk/jwerty/ http://keithcirkel.co.uk/jwerty/
- tych0 14y agoHi craigc, I'd be interested in using this, but (and yeah, this is terrible) I need some sort of "scoping", i.e. hotkeys would dispatch differently based on what element is highlighted. I realize I could achieve this by making my bound function aware of the scoping, but it would be much nicer to have first class library support (in a library with an already kickass-ly simple API). Any thoughts on this?
- mmahemoff 14y agoOne small suggestion is to return Mousetrap from the various methods, so method calls can be chained. Also, +1 for a reset() command. I recently patched radio.js to do this, and I think it's something many Ajax-style apps need. However, I'm seeing there might be a need to whitelist some bindings as being durable (survive a reset).
- craigc 14y agoPlease make tickets at https://github.com/ccampbell/mousetrap/issues https://github.com/ccampbell/mousetrap/issues
- wildmXranat 14y agoWorks. Simple and effective with an easy bar for entry. Good job.
- freshlog 14y agoSweet! I can now non-metaphorically dare someone to build a better Mousetrap.
- J2triplezero 14y agoawesome!
- arms 14y agoVery nice. I was about to hand roll my own implementation of this, but this just saved me some time :-) I like how there's a working demo right there on the page - it's nothing groundbreaking but it definitely adds a bit more polish. Something I'm wondering about - would it pay to have some sort of "variable" key binding whose value would differ depending on the user's OS (if this is even possible)? For example, instead of binding both command+k and ctrl+k, I would bind one combination that would work both on Mac and Windows systems. This isn't a deal breaker or major issue by any means, but I'd be interested to know if it can be done.
- rplnt 14y ago> For modifier keys you can use shift, ctrl, alt, option, meta, and command. No. Just don't. Ever. Unless you are doing a standalone, web based app.
- arianvp 14y agoThat moment you expect an 'up up down down left right left right B A' easteregg but it's not there... time to fork this T_T
- tantalor 14y agoThis might make more sense as a object model rather than class model. There is a lot of state behind the scenes (bind, trigger, reset), which would be natural for an object. Instead it is dumped into global state. The use case might be to support multiple sets of key bindings, e.g., default, user specific, app specific, view specific. When you don't need one set anymore you just "reset" that set instead of resetting everything.
- drudru11 14y agoit needs gmail like 'help' screen
- TimJRobinson 14y agoDear Asana, Evernote and all other text editing web apps: Can you please use this library to add ctrl + s = save support. I hit it so frequently during writing out of habit and every time I do so Chrome asks me to save the website out as a html file. Thanks! :)
- bussetta 14y agoShouldn't it be download it and throw away your mouse? ;)
- drewmclellan 14y agoThis looks really useful, and the API looks simple. Just a quick reminder for those using any library like this; screenreader users (typically blind people) rely heavily on the keyboard to use their web browser. Adding your own shortcuts can really screw them over. It's usually best to make your custom shortcuts a feature that the user opts in to, off by default.
- kxhitiz 14y agoThis is awesome library. Thumbs up for the post.