action by key press

Question

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
}

Answer 1

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

Answer 2

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

Update 1

.keyup and .keydown have different affects - as per comments 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

Answer 3

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

Answer 4

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

});