Javascript Keyboard Shortcuts For Web Application

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 app

Solution 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 :)

Solution 2:

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

Solution 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.

Solution 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.

Solution 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 eventskey('ctrl+r', function(){ alert('stopped reload!'); returnfalse });

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