Overriding Browser's Keyboard Shortcuts

Overriding Browser's Keyboard Shortcuts

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

Overriding shortcut keys in Firefox and Chrome

I have seen the same issue. Some browsers will not allow you to capture certain shortcuts. Look at this https://stackoverflow.com/a/7296303/1366887

Some key combinations are resticted in Chrome 4, but not in Chrome 3. Look here: https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-bugs/Ntc1byZXHfU

Here is the Javascript:

$(window).keydown(function(event) {
  if(event.ctrlKey && event.keyCode == 84) { 
    console.log("Hey! Ctrl+T event captured!");
    event.preventDefault(); 
  }
  if(event.ctrlKey && event.keyCode == 83) { 
    console.log("Hey! Ctrl+S event captured!");
    event.preventDefault(); 
  }
});

I have used this numerous times, and it has worked greatly.

Here is another rescource you can take a look at: http://unixpapa.com/js/key.html

Without Jquery:

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

Here is a JSFIDDLE of it working.

Override the browser shortcuts by my own custom shortcuts

This will let you do this:

e.ctrlKey && String.fromCharCode(kc).toUpperCase()

checks for Ctrl + A to be pressed.

$(document).on('keydown', function(e) {  var kc = e.which || e.keyCode;
  if (e.ctrlKey && String.fromCharCode(kc).toUpperCase() == "A") {    e.preventDefault();    console.log(String.fromCharCode(kc).toUpperCase());    window.location.href = 'your url here';  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>adfasfasdfsda

Is overriding common browser shortcuts like ctrl+s etc. acceptable practice for accessibility?

I don't think overriding default shortcuts is a good idea. I'll give you an example with Discord. I have been using discord for a while and there's a shortcut to mark all servers as read which is shift + esc but the shift + esc on Chrome, opens Chrome's in-built task manager. So now whenever someone will try to use your shortcut not only will the browser execute the function you have attached with the shortcut but also execute the shortcut the browser has in-built attached to it.

How can I override the browser keyboard shortcuts in my GWT/GXT app?

Its better to find key combinations rather than trying to override the keyboard shortcuts which is not a standard approach.

How does Google Sheets override browser shortcuts?

The general idea is to intercept the event and call event.preventDefault() on it if it corresponds to a shortcut that you want to override. For example, the following code will prevent you from navigating to your leftmost tab if you press control-1:

document.body.addEventListener('keydown', (event) => {  // keyCode 49 corresponds to the "1" key  if(event.keyCode==49 && event.ctrlKey) {    event.preventDefault();    console.log('default action prevented, doing custom action instead');  }});

body {  background-color: yellow;}

click me first

---

Related Topics