TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Mousetrap: Keyboard shortcuts in Javascript

395 pointsby jasonmooalmost 13 years ago

30 comments

kallebooalmost 13 years ago
I can't get "$" or "* a" to activate on my Swedish keyboard, where they're typed option-4 and shift-', respectively.<p>Dealing with keyboard-shortcuts and international keyboard is <i>hard</i>, I don't think I've ever gotten an app using ctrl-[ to work right.<p>edit: $ highlights when I type shift-4, while that's actually supposed to produce €
评论 #4204635 未加载
nilliamsalmost 13 years ago
This is why I love the JavaScript community. Tight little library, great API, brilliant project page. Excellent, shiny, hard. work.
评论 #4205473 未加载
评论 #4205611 未加载
ajrossalmost 13 years ago
It 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.
评论 #4204383 未加载
评论 #4204651 未加载
评论 #4204372 未加载
mmahemoffalmost 13 years ago
One small suggestion is to return Mousetrap from the various methods, so method calls can be chained.<p>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).
评论 #4204616 未加载
jlaroccoalmost 13 years ago
I really hate pages that take control of the keyboard like this.<p>Your website isn't so special to completely change how I use my browser.<p>It might be okay for a game, but in every other case, if my regular bindings don't work, I leave.
评论 #4204696 未加载
评论 #4204644 未加载
评论 #4205767 未加载
评论 #4205130 未加载
评论 #4205606 未加载
评论 #4204551 未加载
quartertoalmost 13 years ago
Nice, 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.
评论 #4204394 未加载
评论 #4204716 未加载
评论 #4204397 未加载
TimJRobinsonalmost 13 years ago
Dear 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! :)
bratschealmost 13 years ago
This looks like it's doing basically the same thing that keymaster has already been doing, with an almost identical API:<p><a href="https://github.com/madrobby/keymaster" rel="nofollow">https://github.com/madrobby/keymaster</a>
评论 #4204435 未加载
评论 #4204422 未加载
评论 #4207502 未加载
评论 #4204575 未加载
评论 #4204646 未加载
modartsalmost 13 years ago
I really like the doma.in/name/choice
评论 #4204658 未加载
achalalmost 13 years ago
I 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.
评论 #4204193 未加载
评论 #4204235 未加载
Keithamusalmost 13 years ago
This looks very similar to a library I created/am working on: <a href="http://keithcirkel.co.uk/jwerty/" rel="nofollow">http://keithcirkel.co.uk/jwerty/</a>
tantaloralmost 13 years ago
This 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.<p>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.
jonny_ehalmost 13 years ago
You 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!
评论 #4204570 未加载
armsalmost 13 years ago
Very nice. I was about to hand roll my own implementation of this, but this just saved me some time :-)<p>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.<p>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.
andreyfalmost 13 years ago
Very nice! Wrote something like this one too many times in the past, definitely delighted to replace it with a library in the future, thanks! :)
tych0almost 13 years ago
Hi 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.<p>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?
评论 #4204594 未加载
drewmclellanalmost 13 years ago
This looks really useful, and the API looks simple.<p>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.
Suanalmost 13 years ago
If anyone is looking for a way to let users enter keycombos which you could then use with Mousetrap, I wrote this: <a href="http://suan.github.com/jquery-keycombinator/" rel="nofollow">http://suan.github.com/jquery-keycombinator/</a>
sherazalmost 13 years ago
Nice 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.<p>Had I know about this I might have used it rather than bundling it into my views.<p>Nice work!
评论 #4204639 未加载
mihokalmost 13 years ago
+1 for the url to the project
dansoalmost 13 years ago
Now there's no excuse to not have a Konami code easter egg on your sites.
wildmXranatalmost 13 years ago
Works. Simple and effective with an easy bar for entry. Good job.
lubomiralmost 13 years ago
The funny thing is that with my keymap (cs_CZ) the 4 and $ keybindings are reversed.
评论 #4207469 未加载
freshlogalmost 13 years ago
Sweet! I can now non-metaphorically dare someone to build a better Mousetrap.
bussettaalmost 13 years ago
Shouldn't it be download it and throw away your mouse? ;)
kxhitizalmost 13 years ago
This is awesome library. Thumbs up for the post.
Killswitchalmost 13 years ago
I love you. I really do. This is amazing work.
drudru11almost 13 years ago
it needs gmail like 'help' screen
J2triplezeroalmost 13 years ago
awesome!
rplntalmost 13 years ago
&#62; For modifier keys you can use shift, ctrl, alt, option, meta, and command.<p>No. Just don't. Ever. Unless you are doing a standalone, web based app.