CODEWITHSUNDEEP
javascriptbrowsercross-browserkeyboard-shortcuts
Savageman
Savageman

Reputation: 9487

Which key to bind to avoid conflict with native browser shortcuts?

Every browser has different native keyboard shortcuts. Which ones are free / safe to use if we want to add some spicy stuff to our web-app?

Additional information:

I don't especially need to target every browser. The five majors one are sufficient. For example, Opera commonly uses Ctrl + key, leaving almost all Alt + key "free to bind".

As different browsers use a different main modifier (Ctrl in Opera), I can easily imagine using a different key to bind shortcuts to. i.e Alt + Key in Opera, Ctrl + Key in browser 2, Ctrl + Alt in browser 3, etc.

Upvotes: 26

Views: 6280

Answers (8)

Dave Black
Dave Black

Reputation: 8029

I don't know for certain that this list is exhaustive but you will find a good list of shortcuts for the different browsers here:

http://hubpages.com/hub/Browser-Shortcuts-Cheat-Sheet

Hope this helps.

Upvotes: 1

docta_faustus
docta_faustus

Reputation: 2799

To add to Matt S's recommendation to use plain letter keys (if that fit's your use case), you can use an event.target.matches() check to ensure the plain letter hotkey isn't allowed when the user is focused on an input or textarea:

document.addEventListener('keydown', e => {
  if (e.target.matches('input, textarea')) {
    console.log('typing in input or textarea');
  }
});

Upvotes: 0

Cam
Cam

Reputation: 15234

My recommendation is to change it depending on the browser. The fact is, there are so many browsers out there, I think you'd be hard-pressed to come up with a shortcut scheme that won't break on at least one popular browser.

You could change the shortcut setup based on the browser and also change the instructions specifying which shortcuts to used based on the user's browser.

Ideally, you'd make the shortcut as intuitive as possible (Ctrl + X, or Alt + X etc) without actually interfering with the browser.

Edit: Alternatively if you're comfortable overriding default functionality, maybe use this: http://www.openjs.com/scripts/events/keyboard_shortcuts/

When you specify a shortcut with it, the browser will ignore that shortcut, and you can use it in your app (like gmail does with Ctrl + S, for example).

Upvotes: 3

Matt S
Matt S

Reputation: 15374

If you only need keyboard shortcuts outside of form elements having focus, I would use plain letters (no Ctrl / Alt / Shift / etc.). Regular characters are only important to the browser if a form element has focus. Otherwise they're ignored.

For example, if you have paginated content, P could be previous and N could be next.

(Not sure if this would completely solve your problem because this won't work when a form element has focus.)

Based on your comment (the focus will be inside a textarea), I would suggest a single letter chosen for each action with a different Ctrl / Alt / Shift combination per browser. Most people only use one browser, so for each user to learn just their own combination isn't a big deal.

So, for example, Ctrl + Alt + N in one browser might be the same as Alt + N in another.

The first thing I would test, though, is Shift, because most built-in combinations don't use one, but I don't know if the combos are always case-insensitive. Also watch out for OS-specific combos.

Here's what I've found mostly available so far:

OS X    - FF/Safari/Chrome - ctrl-[key]
Windows - FF/IE            - ctrl-alt-[key]

Upvotes: 11

Jakub Hampl
Jakub Hampl

Reputation: 40543

For Mac users you want to definitely go with Ctrl as Alt is used to type many different characters and command is the default action key which the browsers use. I'd avoid combos that use basic emacs style shortcuts as well (some users use them like Ctrl + K which SO manages to screw up ;) though these are less known and so possibly usable.

For Windows it's more complicated - and I don't have a win box to test it myself.

Upvotes: 2

Ryan C. Thompson
Ryan C. Thompson

Reputation: 42020

For a pragmatic solution, copy Google. They have keyboard shortcuts in Gmail (and probably other products) that do a pretty good job of avoiding browser shortcuts.

Upvotes: 13

FelipeAls
FelipeAls

Reputation: 22171

Screen readers (JAWS, NVDA, ...) already use the whole keyboard, dead keys included (I'm exagerating a little but it's competing with Adobe Photoshop in terms of number of keyboard shortcuts used).

So if you want to support screen readers and other assistive technologies, you should use ARIA and especially role="application". That'll avoid conflicts between your application and the default functioning mode of screen readers in web pages. One drawback is that you've got dozens and dozens of pages to read ...

Introduction à WAI/ARIA (traduction en français) (our common native language, isn't it SDZ/zC? ;))

EDIT: One of the way to solve conflicts is letting the user define and modify his own shortcuts.

Upvotes: 1

rtpHarry
rtpHarry

Reputation: 13125

The short answer is:

Disappointingly, our research discovered that all but 3 keys were previously "claimed" by one technology or the other:

* AccessKey / (slash)
* AccessKey (backslash)
* AccessKey ] (right square bracket)

This is explain in this article:

This wikipedia article give a good general introduction into this subject:

Upvotes: 5

Related Questions