Jquery, Disable Browser Shortcut keys

Question

I am trying to block some of browser shortcut keys for my projects like If user press F1 key then it should open a new page from project, but browse open its Help page. If I press Ctrl + N then it should open specific page but browser open new window.

Here Is my code. (FIDDLE)

$('body').keypress(function(event){

            if (event.keyCode == 17 && event.keyCode == 110)
            {
                alert("New");   
            }
            else
            {
                event.preventDefault(); 
            }


          });

i think you have to handle control and character keys individually, storing the state of the modifier key. iirc you cannot override the browser's decision (configurable, at least on opera and firefox) whether to open a new viewport as a tab or as a new window. Two side remarks: you should use the type-safe comparison operator (`===` instead of `==`) and the normalized `which` property instead of `keyCode` as recommended by the jquery api docs. — collapsar, May 06 '14 at 11:08
yep, as collapsar says, any keys combination with special meaning to your OS or browser aren't going to rise an event which you could handle — ejosafat, May 06 '14 at 11:13

score 2 · Answer 1 · edited May 23 '17 at 12:28

It seems that you cannot interfere with ctrl+key combinations that have special semantics for the browser (at least that seems to be the situation on chrome 34).

have a look at this fiddle demonstrating some ways to query keys and key combinations. note that upon pressing ctrl+n, the keydown handler still triggers the state transition (evidenced by inspecting the alerts upon the keystroke sequence ctrl+n, shift+n, shift+n).

However, I have not found a way to prevent the browser from claiming the keystrokes with meanings in the ui (which I believe is good, taking the user's perspective).

EDIT:

I found this SO answer adressing the issue on chrome (caveat: I haven't tested the solution wrt the current version of chrome).

score 2 · Answer 2 · answered Jun 13 '17 at 11:43

If you have no limitation to use jQuery, this is a neat snippet that exactly do what you want:

var isCtrlHold = false;
var isShiftHold = false;

$(document).keyup(function (e) {
    if (e.which == 17) //17 is the code of Ctrl button
        isCtrlHold = false;
    if (e.which == 16) //16 is the code of Shift button
        isShiftHold = false;
});
$(document).keydown(function (e) {
    if (e.which == 17)
        isCtrlHold = true;
    if (e.which == 16)
        isShiftHold = true;
    
    ShortcutManager(e);
});

function ShortcutManager(e){
    //F1:
    if (e.which == 112) { //112 is the code of F1 button
        e.preventDefault(); //prevent browser from the default behavior
        alert("F1 is pressed");
    }
    
    //Ctrl+K:
    if (isCtrlHold && e.which == 75) { //75 is the code of K button
        e.preventDefault(); //prevent browser from the default behavior
        alert("Ctrl+K is pressed");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Press F1 or press Ctrl+K

Test it on JSFiddle.

You can find the javascript codes of all keys here: https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

score 0 · Answer 3 · answered May 06 '14 at 11:17

0

Try this

$(window).keydown(function(event) {
    if(event.ctrlKey && event.keyCode == 78) { 
        $('body').html("Hey! Ctrl+N event captured!");
            event.preventDefault(); 
        }
    });
});

answered May 06 '14 at 11:17

Rohit Batham

1,238
1
9
13

Admittedly this snippet wouldn't works, regardless of syntax error, the concept of (event.ctrlKey && enent.keyCode) is not working. You can check the modified code (modify syntax error) on jsFIddle: https://jsfiddle.net/7qhwj8oa/1/ I have post a working sample as an answer. – Moshtaf Jun 15 '17 at 23:56

score 0 · Answer 4 · answered May 06 '14 at 11:25

in firefox I tried this

$(document).ready(function(){
    $(document).keyup(function (e) {
       var code = (e.keyCode ? e.keyCode : e.which);

            if(code==112)
            {
                alert("F1 pressed");
            }

    });
 });

f1 - f12: 112-123 workin on main browsers

Explorer 5-7: almost
Firefox 2.0 Windows : yes
Firefox 2.0 Mac: yes
Safari 1.3:almost
Opera 9 Windows:yes
Opera 9 Mac: incorrect

The source I have refereed http://www.quirksmode.org/js/keys.html

score -1 · Answer 5 · answered Jun 13 '17 at 12:11

-1

<html>
<head>
<script src="http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js"></script>
<script>
    shortcut.add("F1",function() {
    alert("F1");
});

</script>
</head>
<body>
Please Key press F1

</body>
</html>

You can try this shortcut script its easy to use.

answered Jun 13 '17 at 12:11

sunakshi verma

141
1
8

are you .. nvm tsk – AyukNayr Jun 04 '19 at 08:58

Jquery, Disable Browser Shortcut keys

5 Answers5

Linked