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.

Gonyea

Have you seen this: openjs.com/scripts/events/keyboard_shortcuts – Reifel

bounty has nothing to do with accept; see stackoverflow.com/faq#bounty – Ackler

Here is an article regarding choosing keyboard shortcuts for Web applications: medium.com/design-ux/a7c3b7b408ee – Purely

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

Jadajadd

I thought I had accepted your answer, so I'm wondering why you got only 50% of the bounty!? – Gonyea

Its because you accepted after the time was up, its ok, ill take 25 ;) You could also flag this as an error if you know for sure you accepted before the voting time was up. – Jadajadd

@oscar accept has nothing to do with bounties. stackoverflow.com/faq#bounty – Ackler

@Jeff Well, its only half the bounty and i know you only get half the bounty if you wait past the accept time, right? Thats why I assumed it was for that reason. Why would I only get half the bounty then? Just curious – Jadajadd

@Oscar It is explained on the page Jeff linked to. The bounty is not automatically awarded to the accepted answer, it has to be manually awarded by clicking the little award button. As explained in the faq, the reason you got half the bounty is because: If you do not award your bounty within 7 days, the highest voted answer created after the bounty started with at least 2 upvotes will be awarded half the bounty amount. (+1 for a useful answer, btw) – Sequin

When I press 'a', 'd' I get "you pressed alt + d" ehm... not exactly what I was expecting... – Judgeship

Answer 2

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

Carillon

Mousetrap was one of those things where it all just worked like I hoped. Nice work. – Poeticize

I concur, totally kicks ass! Dropped it in and was away. Implemented keyboard shortcuts within half an hour of downloading it. And I am a js n00b! – Canonical

konami code - awesome – Mode

(On the Mousetrap page: JavaScript, not Javascript.) – Overestimate

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.

Barmecide

+1 for mentioning jQuery hotkeys. However, your following sentences don't make a whole lot of sense as written. – Obscurantism

Link;s dead - try code.google.com/p/js-hotkeys – Neeley

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.

Basilica

Accesskeys are for accessibility, ex: <a href="home.php" accesskey="1">Home</a>. – Thebault

@boudou: True but there's no reason to limit accessibility to the mouseless. The <label> element is also for accessibility but that doesn't mean that only people using screen readers are allowed to use it. – Basilica

Example: In Firefox, Shift + Alt + U will change the focus to an input element in a form if the input element has the attribute accesskey="U". – Overestimate

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(){ });

Glaucoma

This is brilliant. Is there any way to prevent the bypass of the key? I have implemented this so that pressing 'n' opens a dialog with a new item. However, the 'newItem-function also put focus upon the item name, and the 'n' character is bypassed in. – Elyssa

Answer 6

This one is very easy to use.

Example:

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

Thebault

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

Grof

Example: In Firefox, Shift + Alt + U will change the focus to an input element in a form if the input element has the attribute accesskey="U". – Overestimate