JavaScript keyboard shortcuts for web application

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.

Have you seen this: http://www.openjs.com/scripts/events/keyboard_shortcuts/ — Karl Andrew, Apr 29 '11 at 19:43
bounty has nothing to do with accept; see http://stackoverflow.com/faq#bounty — Jeff Atwood, May 10 '11 at 11:24
Here is an article regarding choosing keyboard shortcuts for Web applications: https://medium.com/design-ux/a7c3b7b408ee — KIR, Nov 05 '13 at 20:10

Oscar Godson · Accepted Answer · 2012-07-11T05:38:54.647

37

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

edited Jul 11 '12 at 05:38

answered May 02 '11 at 22:43

Oscar Godson

31,662
41
121
201

I thought I had accepted your answer, so I'm wondering why you got only 50% of the bounty!? – Achim May 10 '11 at 05:03
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. – Oscar Godson May 10 '11 at 05:43
@oscar accept has nothing to do with bounties. http://stackoverflow.com/faq#bounty – Jeff Atwood May 10 '11 at 11:25
@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 – Oscar Godson May 10 '11 at 16:51
@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) – Mia Clarke May 11 '11 at 21:26
When I press 'a', 'd' I get "you pressed alt + d" ehm... not exactly what I was expecting... – Simon Jan 23 '13 at 20:44

score 18 · Answer 2 · edited Jul 08 '19 at 19:29

18

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

edited Jul 08 '19 at 19:29

Peter Mortensen

30,738
21
105
131

answered Jul 10 '12 at 02:56

Craig

2,684
27
20

2

Mousetrap was one of those things where it all just worked like I hoped. Nice work. – prototype Oct 05 '12 at 02:51
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! – JoeyC May 22 '14 at 05:40
konami code - awesome – jleach May 01 '16 at 00:50
1

(On [the Mousetrap page](http://craig.is/killing/mice): *[JavaScript](https://en.wikipedia.org/wiki/JavaScript)*, not *Javascript*.) – Peter Mortensen Jul 08 '19 at 19:33

score 10 · Answer 3 · edited Jul 08 '19 at 19:36

10

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

edited Jul 08 '19 at 19:36

Peter Mortensen

30,738
21
105
131

answered May 04 '11 at 19:21

pmaruszczyk

2,157
2
24
49

5

+1 for mentioning jQuery hotkeys. However, your following sentences don't make a whole lot of sense as written. – jessegavin May 09 '11 at 18:32
Link;s dead - try http://code.google.com/p/js-hotkeys/ – Onimusha Aug 31 '13 at 09:35

score 5 · Answer 4 · answered Apr 29 '11 at 19:43

5

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.

answered Apr 29 '11 at 19:43

mu is too short

426,620
70
833
800

1

Accesskeys are for accessibility, ex: `Home`. – bfontaine May 09 '11 at 10:08
@boudou: True but there's no reason to limit accessibility to the mouseless. The `` element is also for accessibility but that doesn't mean that only people using screen readers are allowed to use it. – mu is too short May 09 '11 at 18:55
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"`. – Peter Mortensen Jul 09 '19 at 10:46

score 3 · Answer 5 · edited Jul 08 '19 at 19:51

3

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

edited Jul 08 '19 at 19:51

Peter Mortensen

30,738
21
105
131

answered Jan 30 '13 at 07:58

Henrik Joreteg

1,698
16
18

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. – Asle G Jan 27 '15 at 10:29

score 2 · Answer 6 · edited Jul 08 '19 at 19:57

2

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.

Enter image description here

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

edited Jul 08 '19 at 19:57

Peter Mortensen

30,738
21
105
131

answered Jul 13 '12 at 11:18

Sam Hasler

12,344
10
72
106

1

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"`. – Peter Mortensen Jul 09 '19 at 10:45

score 2 · Answer 7 · edited Jul 08 '19 at 19:52

2

This one is very easy to use.

Example:

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

edited Jul 08 '19 at 19:52

Peter Mortensen

30,738
21
105
131

answered May 09 '11 at 10:10

bfontaine

18,169
13
73
107

JavaScript keyboard shortcuts for web application

7 Answers7

Linked