Enable Keyboard Shortcuts to Website with Javascript Plugins

Enable Keyboard Shortcuts to Website with Javascript Plugins


Enable Keyboard Shortcuts to Website with Javascript Plugins

Introduction

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...");
    },{
       'type':'keypress',
       'propagate':true,
       'target':document
    });	
    
  • 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 () { [...] });
    

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement