Add Hot Keys to Web Apps With jQuery.hotKeyMap.js

github_icon 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:

jQuery.hotKeyMap.js on GitHub

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

17 comments

Submit a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s