Hot keys (or accelerator keys) have been an important navigational tool for desktop applications for many years. Finally, web applications are adopting this functionality too. Check out this simple example of a web app with hotkeys.
Expect a more general blog post on the topic soon. For now, I’d like to share my jQuery plugin that enables this capability with you.
Announcing jQuery.hotKeyMap.js: A jQuery plugin that allows you to add complex hot-key functionality and navigation to your web apps with very little effort.
You can download it here:
It’s built on top of John Resig’s jQuery.hotKeys. His plugin is great (as you’d expect), but as far as I know doesn’t support complex series of keys. For example, if you want to GMail style navigation (press ‘g’ then press ‘t’ to go to sent mail), that’s fairly difficult using his plugin. Here’s how you accomplish this with my plugin:
In the code above, we’re assigning three immediate key actions (e.g. ctrl+z executes undo). We are also adding one complex sequence: g, h => navigates to the home page (calls navTo, not shown, passing ‘h’).
Want to see it in action? Check out my sample application:
Web Apps Have Hot Keys Too!
http://web-apps-hotkeys.azurewebsites.net/
It even comes with Visual Studio intellisense:
I hope you find it useful!
Cheers,
@mkennedy
Michael Kennedy on Technology 
Nice post. My mate has done something similar as well:
http://codeblog.shawson.co.uk/adding-cross-browser-consistent-keyboard-short-cuts-to-your-website/
Thanks for the link. He’s plugin is interesting. Looks like a more markup driven version of John Resig’s plugin. The main difference I think (didn’t fully read his) is that mine allows for mult-sequence keys (not just ctrl+k, but press k then x, that sort of thing).
Cheers!
Michael
This plugin makes three additional http requests. Can you combine all scripts into one file?
Thanks!
Hi Leo,
Yes, I realize that. It’s not the best for perf. However, the other two libraries it pulls in are John Resig’s plugin and jQuery itself. I definitely don’t want to combine it with jQuery. I might with John’s js file, but it’s technically not part of my lib.
It’s simple enough for you to just create a new file and paste in John’s then my hotkey plugins. That should be an improvement. Even better, toss it into a web-based minifier and save that (although they are both very small).
Cheers,
Michael
Will this override browser default mappings? i.e. Ctrl-N, Ctrl-S?
Hi Will,
It doesn’t block ctrl-N on Chrome. But it can block F5. I updated the sample to attempt to block both. Give it a try if you want to see how it works.
Cheers,
Michael
Hi, How can we create more than 1 hot key , I try with this following code but it cannot understand. I want to press ‘r’ then press ‘h’ => it will come to Dashboard page
$(document).mapHotKeys([
$.mapHotKeys.createSequence(“r”, “h”, $(document), function(){window.location = url_root_path + ‘dashboard/’;})
]);
Please help me if i miss anything . Thanks
hi, Thanks for your tutorial. However, this does not work on mozilla. only on ie and chrome.
I just tried it and it worked fine on Firefox.
Hi Michael Kennedy,
Thanks for making this script. I’m a real noob with javascript, and I can’t get your script to work like I would. I want your script to work like autohotkey. So for example when I type: \R, I want to replace this \R with \mathbb{R}.
I’ve a whole autohotkey list, but I would like to add this functionality to my site. Would that be possible with your script ?
Kinds regards, Kasper
I think so, check out the working demo app and see if it helps.
I cant pass an argument on actions?
ps: thanks for tutorial
Possibly but I’m not sure off the top of my head. Maybe some cool closure trick.
Hi Michael, Good work. Is this plugin free to use or is there any license associate with this?
Yes, it’s open source MIT. You’ll find the license on the github page: https://github.com/mikeckennedy/web-apps-hotkeys So basically yes it’s free to use!
Dear Michael really beautiful sample and easy to use.
But i have a problem to read the $(document).externalLinks(); in my sample please any help ?