Overriding shortcut keys in Firefox and Chrome

Question

I have a script that is supposed to open a section of a web page, and save changes on Ctrl + n and Ctrl + s respectively. I got it working in IE, but it doesn't seem to work in Firefox and Chrome. Any ideas?

My override function.

function prevent(e)
{
try{e.stopPropagation();}catch(ex){}
try{e.preventDefault()}catch(ex){}
try{if (e.preventDefault)
        e.preventDefault();
    else {
        e.cancelBubble = true;
        e.returnValue = false;
        e.keyCode = 0;
    }}  catch(ex){}
}

this might help: http://stackoverflow.com/q/7295508/212869 (or not as the case may be) — NickSlash, Apr 09 '13 at 20:36
I am trying to avoid JQuery I already have looked at that one. — wolfcall, Apr 09 '13 at 20:47
I was thinking more of the answers stating that some browser shortcuts cant really be overridden, also anything done in jQuery can be done in plain JavaScript — NickSlash, Apr 09 '13 at 20:48

score 18 · Accepted Answer · edited May 23 '17 at 12:10

18

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.

edited May 23 '17 at 12:10

Community

1
1

answered Apr 09 '13 at 22:07

Hunter Mitchell

7,063
18
69
116

I am having an odd problem with my code in firefox. When I run your JSfiddle it works no problem, but when I add it to the js file on my site it still opens the new tab have you ever seen this before? – wolfcall Apr 11 '13 at 18:14
@wolfcall Are you sure you have th JS file linked? Also, this could be something to do with a new firefox if they have updated. Make sure you js is running. – Hunter Mitchell Apr 11 '13 at 18:38
My js is running I already thought of that i put an alert to display on load and it does launch. I have tried this file in firefox 15 and 20. – wolfcall Apr 11 '13 at 18:57
Don't worry about it I sort of figured it out. My code to activate my save and new item functions for some reason cause it to happen anyway once commented out it works fine... took me two days to figure this out -.-' – wolfcall Apr 11 '13 at 23:57
Got more questions for you. In Firefox do you have the alert function interfere with your prevent Default function – wolfcall Apr 12 '13 at 18:32
i am not really understand what you men? – Hunter Mitchell Apr 12 '13 at 22:59
If you run the JSFiddle link you gave me in firefox does it work with no changes? – wolfcall Apr 15 '13 at 13:13
Sorry with the Ctrl + N function not Ctrl + S – wolfcall Apr 15 '13 at 13:39
Surprisingly, the vanilla, non Jquery version still works in Chrome 81, while other methods fail. Also, it works 'only' when you use the capital key. – Vignesh May 21 '20 at 17:35

score 0 · Answer 2 · edited Oct 15 '21 at 15:17

0

For anyone looking for this in the future, the answer for current browsers is the following:

if (event.ctrlKey && event.key === 'k') event.preventDefault()

edited Oct 15 '21 at 15:17

Adrian Mole

49,934
160
51
83

answered Oct 15 '21 at 14:43

Afonso Ramos

27
7

Overriding shortcut keys in Firefox and Chrome

2 Answers2

Linked