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

Question

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.

Answer 1

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] 

Answer 2

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.