CODEWITHSUNDEEP
javascriptjqueryhtmlbrowserkeyboard-shortcuts
Shivam Pandya
Shivam Pandya

Reputation: 1061

Jquery, Disable Browser Shortcut keys

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


          });

Upvotes: 7

Views: 20640

Answers (5)

sunakshi verma
sunakshi verma

Reputation: 141

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

Upvotes: -1

Moshtaf
Moshtaf

Reputation: 4903

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

Upvotes: 2

collapsar
collapsar

Reputation: 17238

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

Upvotes: 2

Sajitha Rathnayake
Sajitha Rathnayake

Reputation: 1728

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

Upvotes: 0

user5296864
user5296864

Reputation:

Try this

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

Upvotes: 0

Related Questions