Keypress

by exe1

HTML

<div>
    Passe dessus
</div>

CSS

div {
    background:orange;
    overflow:visible;
    padding:10px;
    position: absolute;
    left:20px;
    width:200px;
}
p {
    margin:10px;
}

JavaScript

/*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
*/

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {

    var keycode = event.which || event.keyCode, // Ex : 112
        myKey   = event2key[keycode]; // Ex : 'p'
    
    console.log(event.type, event.which, event.keyCode, myKey);
    
    switch (myKey) {
        case 'left':
        case 'a':
            $('div').css({left:'-=50'});
            break;
        case 'right':
        case 'z':
            $('div').css({ left:'+=50'});
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);