Enable Keyboard Shortcuts to Website with Javascript Plugins

Written by Kevin Liew on 16 Jul 2012
27,379 Views • Techniques


Using shortcut key as an alternative navigation method on a website is not something new. If possible, it's actually encouraged to create such navigation solution for accessibility. Of course, most browsers already has a set of built-in shortcut for it. How about, if you want to make your website to be able to interact with keyboard input? This time, we have gathered 5 javascript plugins that allow you to achieve that easily. You can easily define combo shortcut keys such as 'CMD+SHIFT+P' and bind an event with it. These plugins are small in size and some are independent plugins that require no javascript framework to work with.

  • Mousetrap A simple library for handling keyboard shortcuts in Javascript. Mousetrap is a standalone library with no external dependencies. It weighs in at around 1.6kb minified and gzipped and 3kb minified.
    Mousetrap.bind('4', function() { highlight(2); });
    Mousetrap.bind('x', function() { highlight(3); }, 'keyup');	
  • Keyboard.js KeyboardJS is a library for binding to keys or key combos. It can be used as both a standalone library or an AMD module (see RequireJS for details).
    KeyboardJS.bind.key(keyCombo, onDownCallback, onUpCallback);	
  • js-hotkeys jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination.
    $(document).bind('keydown', 'ctrl+a', fn);	
  • Shortcut.js shortcut.js is a JavaScript file that enables keyboard shortcuts in any web application. I wrote the script to add keyboard shortcuts to a very early stage project I’m working on which I’m not ready to disclose at the moment.
    shortcut.add("Ctrl+B",function() {
       alert("The bookmarks of your browser will show up after this alert...");
  • jwerty jwerty is a JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalises the poor std api into something easy to use and clear.
    jwerty.key('ctrl+shift+P', function () { [...] });
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.