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!

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.


jwerty

Source
Demo

2. jQuery Hotkeys

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


jQuery Hotkeys

Source
Demo

3. Keyboard

Virtual Keyboard using jQuery UI.


Keyboard

Source
Demo

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

Source
Demo

5. Piano

A flexible piano keyboard plugin for jQuery


Piano

Source
Demo

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.


okShortcut

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

Source
Demo

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.


jQuery.actionsmenu-1.1

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

Source
Demo

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.


numerickeyboard.js

Source
Demo

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

Source
Demo