javascript - Jquery, Disable Browser Shortcut keys - Stack Overflow

admin管理员组

文章数量:1341739

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 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(); 
            }


          });

• javascript
• jquery
• html
• browser
• keyboard-shortcuts

Share Improve this question Follow edited Oct 1, 2018 at 6:58 NIMISHAN 1,26544 gold badges2121 silver badges3131 bronze badges asked May 6, 2014 at 10:57 Shivam PandyaShivam Pandya 1,06133 gold badges3030 silver badges6666 bronze badges 3

• 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 parison operator (=== instead of ==) and the normalized which property instead of keyCode as remended by the jquery api docs. – collapsar Commented May 6, 2014 at 11:08
• @collapsar can you please give demo on jsfiddle ? – Shivam Pandya Commented May 6, 2014 at 11:09
• yep, as collapsar says, any keys bination with special meaning to your OS or browser aren't going to rise an event which you could handle – ejosafat Commented May 6, 2014 at 11:13

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

It seems that you cannot interfere with ctrl+key binations 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 binations. 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).

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./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./articles/15/javascript-char-codes-key-codes

Try this

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

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/js/keys.html

<html>
<head>
<script src="http://www.openjs./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.

本文标签： JavaScriptJQueryDisable Browser Shortcut keysStack Overflow