15+ Keyboard Event Plugins

Today we have a collection of 15 jQuery Keyboard Event Plugins that you would definitely love integrating in your webpage! Keyboard Event’s can add further usability to websites that have high interactivity with the user or need input via the keyboard as key combinations that trigger events on the page. They could also be useful to provide quick shortcuts or for keypad entry, the list goes on. Have fun!

Update 12/12/13: Added 17. Keypress.js Plugin (awesome!)
Update 29/09/13: Added 16. jQuery key.js Plugin

Related posts:

1. jwerty


Is a JS lib which allows you to bind, fire and assert key combination strings against elements and events. It normalizes the poor std api into something easy to use and clear.



2. jQuery Hotkeys

Lets you watch for keyboard events anywhere in your code supporting almost any key combination.

jQuery Hotkeys


3. Keyboard

Virtual Keyboard using jQuery UI.



4. Keyboard Smashed

A jQuery plugin to detect if a user has smashed their keyboard. This is determined by the amount of keys that are depressed which triggers the event.

Keyboard Smashed


5. Piano

A flexible piano keyboard plugin for jQuery



6. okShortcut

The two methods jQuery.shortcut.add and jQuery.shortcut.remove are used to add and remove key bindings, respectively. Both take a key-combination and a callback. jQuery.shortcut.add can optionally receive an options hash.


Source + Demo

7. jQuery Keyboard Navigation Plugin

Provides the capability for elements on a page to be navigated and activated via the keyboard’s up, down, right and left arrow keys.

jQuery Keyboard Navigation Plugin

Source + Demo

8. jQuery Keypad

A jQuery plugin that attaches a popup keyboard to a text field for mouse-driven entry or adds an inline keypad in a division or span.

jQuery Keypad

Source + Demo

9. Ctrl + Key Combination

Simple jQuery Plugin.

Ctrl + Key Combination

Source + Demo

10. jQuery Plugin: Custom Styled Select Input w/Keyboard Interaction

There are still a few minor bugs that need to be fixed but it works enough for me, one bug is that in IE you need to click in the drop-down area if you don’t want the page to jump when using the keys.

jQuery Plugin: Custom Styled Select Input w/Keyboard Interaction


11. jQuery.actionsmenu-1.1

This jQuery plugin makes it easy to provide access to functions from a drop-down menu. Includes accessibility features like WAI-ARIA and keyboard support for universal access.


Source + Demo

12. Adding Keyboard Navigation

I was recently asked how keyboard navigation could be supported to move a slider backwards and forwards. I’ve created a few tutorials on how to create sliders and carousels but not mentioned keyboard supported navigation yet.

Adding Keyboard Navigation


13. Keyboard Accessibility Plugin API

Makes it easy for developers to add keyboard handlers to their code without a lot of extra overhead.

Keyboard Accessibility Plugin API

Source + Demo

14. numerickeyboard.js

Is a fairly simple-minded and an extremely easy to use plugin to create numerical keyboard for input.



15. Keyboard Links

Is a plugin which allows the user to quickly find any link on the page and click it by just using the keyboard.

Keyboard Links


16. jQuery key.js Plugin

For a quick view of the kind of functionality that Keys.js is intended to provide, check out the demo application. It is a simulated web mail application with configurable keyboard shortcuts.

Source Demo

17. jQuery KeyPress Plugin

Keypress is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~9kb), and has no dependencies.

Source + Demo