Overriding Browser's Keyboard Shortcuts

52
votes

I'd like to add support for keyboard shortcuts to a couple of pages in my web application by intercepting the keypress event handler of the document object, not the accesskey attribute.

The problem is that every browser has its own keyboard combinations, so it's impossible to come up with a set of keyboard combinations that work on all web browsers and yet consistent.(e.g. It'd be silly if the shortcut for save was Ctrl + Shift + S while one for delete was Alt + D.)

So I figured it would be just simpler to override browser shortcuts altogether in a couple of pages with mine.

All downside aside, is it possible? If so, how do you do it?

4
javascript
On a personal note, please avoid overriding common browser shortcuts that are consistent between browsers such as C-w, C-t, C-S-t... Some of Google's products override common browser shortcuts and its incredibly annoying! – Mark K Cowan
It can be difficult to know what are "common" user shortcuts. For example, do many users use C-e or is it relatively fine to override? It'd be great to have a chart of percents of users who use each browser shortcut. – JKillian
@JKillian Indeed, but where do you measure the cutoff? The 1% or 0.5% are still going to be annoyed. I'm sure engineers at Google are aware they are block shortcuts but trying to find shortcuts that are useful to a wider audience. (Then there's the question, are they useful to the wider audience?) But none of these are questions appropriate to stack overflow! – Josiah Yoder

4 Answers

17
votes

There's an excellent coverage of this here: http://unixpapa.com/js/key.html

As for whether this is something that should be done, stackoverflow's question editor override's quite a few keys without disrupting too much (hover over the toolbar buttons).

43
votes
onkeydown = function(e){
  if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)){
    e.preventDefault();
    //your saving code
  }
}
14
votes

Here is my solution to this problem:

Most (if not all) of the browser's shortcuts will be overriden. Only system ones, like Alt + Tab or the Windows key won't.

document.onkeydown = overrideKeyboardEvent;
document.onkeyup = overrideKeyboardEvent;
var keyIsDown = {};

function overrideKeyboardEvent(e){
  switch(e.type){
    case "keydown":
      if(!keyIsDown[e.keyCode]){
        keyIsDown[e.keyCode] = true;
        // do key down stuff here
      }
    break;
    case "keyup":
      delete(keyIsDown[e.keyCode]);
      // do key up stuff here
    break;
  }
  disabledEventPropagation(e);
  e.preventDefault();
  return false;
}
function disabledEventPropagation(e){
  if(e){
    if(e.stopPropagation){
      e.stopPropagation();
    } else if(window.event){
      window.event.cancelBubble = true;
    }
  }
}
1
votes

Here is my Solution:

document.onkeydown = function () {
                       if ((window.event.keyCode == 121) && (window.event.ctrlKey))) {
               window.event.returnValue = false;
               window.event.cancelBubble = true;
               window.event.keyCode = 0;
               return false;
           }
       }