JavaScript keyboard shortcuts for web application [closed]

Question

I want to develop a web application, which should (ideally) be fully usable via the keyboard. I know how to handle keyboard events in JavaScript, but managing them for a larger application is quite boring.

Is there a library which makes that process easier?

Please note that I'm not interested in a full-blown Web GUI framework. I want to keep control over my webpage/application.

Answer 1

Check out my project:

https://github.com/oscargodson/jkey

And demos:

http://oscargodson.github.com/jKey/

Feel free to use it and if you want, contribute :)

Answer 2

I just developed one of my own called Mousetrap. Check it out.

Answer 3

You can use Hotkeys - a plugin for jQuery. jQuery is a quite lightweight JavaScript library - it is a required JavaScript file for using Hotkeys.

Answer 4

You could start by reading about the accesskey attribute:

This attribute assigns an access key to an element. An access key is a single character from the document character set. Note. Authors should consider the input method of the expected reader when specifying an accesskey.
[...]
The invocation of access keys depends on the underlying system. For instance, on machines running MS Windows, one generally has to press the "alt" key in addition to the access key. On Apple systems, one generally has to press the "cmd" key in addition to the access key.

You can also put the accesskey attribute on <a> elements, an example of this usage can be found on the "Random Article" sidebar link on Wikipedia.

Answer 5

I would strongly encourage you to check out Thomas Fuchs' keymaster for doing keyboard shortcuts in web applications: https://github.com/madrobby/keymaster

It makes it quite simple:

// Define short of 'a'
key('a', function(){ alert('you pressed a!') });

// Returning false stops the event and prevents default browser events
key('ctrl+r', function(){ alert('stopped reload!'); return false });

// Multiple shortcuts that do the same thing
key('⌘+r, ctrl+r', function(){ });

Answer 6

This one is very easy to use.

Example:

shortcut.add("Up",     // Key
             go_up()); // Function

Answer 7

You could use the accesskey HTML attribute as it would then make your web application accessible.

Use the KeyTips jQuery Plugin to display them to the user in a similar way to Office Ribbon keyboard shortcuts.

Try the Demo. Code on GitHub.

Note that the Wikipedia page on accesskey lists the modifier keys to invoke access keys for different browsers.

See also the A List Apart article: Accesskeys: Unlocking Hidden Navigation