I'm designing a web based accounting software. I would like to open the "new accounting document" whenever the user press N key for example. And open "settings" whenever he/she is pressing S key.

I saw some scripts based on JavaScript and jQuery. But they did not work exactly. Can anyone help me please ?

I have tried this script:

var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
   //Do something
}

I'm designing a web based accounting software. I would like to open the "new accounting document" whenever the user press N key for example. And open "settings" whenever he/she is pressing S key.

I saw some scripts based on JavaScript and jQuery. But they did not work exactly. Can anyone help me please ?

I have tried this script:

var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
   //Do something
}

• javascript
• jquery
• onkeypress

• Can you post the code. It will help in answering. – Sandeep G B Commented Nov 28, 2011 at 11:08
• "Whenever the user press N key" - I'm not sure what "accounting document" means to you, but I would expect some fields for the user to enter account names and other non-numeric information, so what happens when they want to put an "N" or "S" in their account names? – nnnnnn Commented Nov 28, 2011 at 11:12
• 1 Just saw your update with code - what's the problem with it? It says right there in the ment that it is trying to trap the Enter key. Have a look at this table of key codes. – nnnnnn Commented Nov 28, 2011 at 11:19

4 Answers 4

$(document).bind('keyup', function(e){
    if(e.which==78) {
      // "n"
    }
    if(e.which==83) {
      // "s"
    }
});

To prevent if an input is focused:

$("body").on("focus",":input", function(){ $(document).unbind('keyup'); });
$("body").on("blur",":input", function(){ $(document).bind('keyup', function(e){ etc.... });

You might want to put the bind function into its own function so you don't duplicate code. e.g:

function bindKeyup(){
    $(document).bind('keyup', function(e){
      if(e.which==78) {
        // "n"
      }
      if(e.which==83) {
        // "s"
      }
    });
}
$("body").on("focus",":input", function(){ $(document).unbind('keyup'); });
$("body").on("blur",":input", function(){ bindKeyup(); });

You can detech keypresses in jQuery using either .keypress() or .keyup() methods, here is a quick example :

$(document).keyup(function(event) { // the event variable contains the key pressed
 if(event.which == 78) { // N keycode
   //Do something
 }
});

Here is a list of keycodes : http://www.cambiaresearch./articles/15/javascript-char-codes-key-codes

Update 1

.keyup and .keydown have different affects - as per ments from @ThomasClayson -: keyup is the best one to go for as keypress will repeat if the key is held down. it registers an event for each character inserted. It also doesn't register modifier keys such as shift (although not necessary here, it might be something to keep in mind)

Update 2

This is from the jQuery keyup doc site :

To determine which key was pressed, examine the event object that is passed to the handler function. While browsers use differing properties to store this information, jQuery normalizes the .which property so you can reliably use it to retrieve the key code. This code corresponds to a key on the keyboard, including codes for special keys such as arrows.

Affectively meaning that which.event is all you need to determine which key has been used. Thanks @nnnnnn

You need to read up on the .keyCode() attribute of the event object. You can interrogate that to discover which key was pressed and act accordingly. I'd also suggest you add modifier keys to your shortcuts, such as Shift or Alt, so that when someone is innocently typing in an input, the panel doesn't pop up. In the example below I've used Shift

$(document).keyup(function(e) {
    if (e.shiftKey) {
        switch(e.keyCode ? e.keyCode : e.which) {
            case 78: // N pressed
                myNPressedHandler();
                break;
            case 83: // S pressed
                mySPressedHandler();
                break;
        }
    }
} 

$(document).bind('keypress', function(e) {
    var keycode= (e.keyCode ? e.keyCode : e.which);
       if(keyCode==78) {
      // "n"
    }else if(keyCode==83) {
      // "s"
    }

});