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 () { [...] });
```

Enable Keyboard Shortcuts to Website with Javascript Plugins

Introduction

TRENDING Post

Javascript Library