57

I am developing a quite large web application, and it is probably a good idea to use hotkeys for some common tasks. However, I discovered that finding safe key combinations is a problem, regarding all different browsers and OSes.

For example, Chrome has such a long list of hotkeys that trying to use some kind of logical hotkeys scheme for my web application is impossible - e.g. Ctrl + 1, Ctrl + 2, Ctrl + 3, etc.

Do you have some cheat sheet of safe hotkeys which can be used in a web application and not worry about some browser or OS interference?

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Frodik
  • 14,986
  • 23
  • 90
  • 141
  • 1
    Oh, and I forgot to post a link to Microsoft's site with common used hotkeys in their OSes: http://support.microsoft.com/kb/301583 – Frodik Jul 25 '10 at 13:54

5 Answers5

18

I wouldn't count on it. It's probably okay to listen for shortcuts that use the Alt modifier, but there's still no way to be sure a keyboard shortcut is free. Users can always install programs that listen for keyboard shortcuts, or use a browser you didn't expect.

If the shortcuts can be used only when the user is not typing in a textbox or something, it might be a better idea to just listen for keys pressed without a modifier key.

If no textbox or other GUI element is focused, then document.activeElement == document.body should be true (somebody correct me if I'm wrong).

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
BernzSed
  • 1,129
  • 8
  • 9
  • 1
    "It's probably okay to listen for shortcuts that use the Alt modifier" Nope, there are many Alt keyboard shortcuts in Chrome. For example, Alt+d is address bar, Alt+f is the settings drop-down. Here are all of them: https://support.google.com/chrome/answer/157179?hl=en – Patrick Dec 21 '19 at 18:19
11

I don't think there is such a list. This may even be different for different locales.

You can try to rely on the accesskey feature of HTML: http://www.w3.org/TR/html401/interact/forms.html#adef-accesskey. This should keep the number of collisions relatively small. Though I believe the Windows browsers will offer these keys as Alt+Letter which collides with the menu bar.

Alternatively do what Google reader and Gmail do: use the letters directly without any hotkey modifier. That will only work for certain types of applications, though.

Patrice Neff
  • 1,444
  • 11
  • 13
  • 1
    Thanks for answer. Problem is that most of the functionality with hotkeys happens in textbox, so accesskey is useless in this case. User enters shop items in a form, and right now I am using for example ctrl+enter as a shortcut to add shop item or ctrl+f1 to lookup item using ajax to see if it already exists, and so on.... I spend some time googling on this and I think there really isn't list of generally available hotkeys for web apps. I just thought someone here could have made one for him or herself. – Frodik Jul 25 '10 at 16:05
4

Facebook uses the following ones that need different main keys to press depending on the used browser:

https://www.facebook.com/help/156151771119453?helpref=faq_content

Key Combinations for Different Browsers

Find the right combination of keys for your browser in the list below, and replace # with the access key number listed under access keys below.

Internet Explorer for PC: Alt + #, then Enter
Firefox for PC: Shift + Alt + #
Safari for Mac: Ctrl + Opt + #
Firefox for Mac: Ctrl + Opt + #
Chrome for Mac: Ctrl + Opt + #
Chrome for PC: Alt + #

Access keys
0 - Help
1 - Home
2 - Timeline
3 - Friends
4 - Inbox
5 – Notifications
6 – Settings
7 - Activity Log
8 - About
9 - Terms

However, Facebook supports these shortcuts in all browsers:

Web Messenger Keyboard Shortcuts
Ctrl + G - Search conversations
Ctrl + Q - Show/hide keyboard shortcuts
Ctrl + Delete - Archive/unarchive conversation
Ctrl + J - Mark as spam
Ctrl + M - Start a new message
Ctrl + I - Go to Inbox
Ctrl + U - Go to Other

Conclusion: Some shortcuts might work in all browsers, but most of them need additional explanation.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
mgutt
  • 5,867
  • 2
  • 50
  • 77
1

As with most lists, it is easier to list (and therefore find) what exists rather than what is available. Depending on how you define "safe hotkey" there are quite a few (the basic ones), or thousands (slightly more advanced ones, like how Gmail uses two letter combinations (hotstrings)).

I think the best you can do is to look at these two comprehensive lists for OS and browser specific hotkeys, and make a list based on those. If you want to take it one step further, here is something that might help you (not tested it myself).

For your specific issue I think you should look at how Gmail, Facebook, Remember the Milk uses hotkeys; as these all have solved your issue elegantly. If you make a list of what they use you might have a list of hotkeys to use there. On a side note, I use Breevy, AutoHotkey, and several other programs that I create the advanced type of hotkeys (43,956 and counting), and because their are the simple kind, there was hardly ever an issue with overlapping hotkeys with their systems.

Stenemo
  • 611
  • 7
  • 13
0

In short: No.

Suggested modifier keys (the other modifier keys are used by OS or browser):

  • macOS - control, control+option, control+shift and control+option+shift

  • win OS - just alt+shift

  • you can use control+shift on macOS, which is similar to alt+shift on win

Míng
  • 2,500
  • 6
  • 32
  • 48