jQuery: press J and have it do something, press H and have it do something else

Question

I can't get a simple answer to this: When I press the letter J, i want it to hide $('.something') and when i press the letter H, I want it to show $('.something')

press the letter J
$('.something').hide()

press the letter H
$('.something').show()

Answer 1

document.addEventListener('keypress', function(e) {
    if (String.fromCharChode(e.charCode) == 'j') $('.something').hide();
    if (String.fromCharChode(e.charCode) == 'h') $('.something').show();
}, false);

Answer 2

$(document).bind('keydown', function(e) {
    if (e.keyCode == 72) {
        // press the letter H
        $('.something').show()
    } else if (e.keyCode == 74) {
        //press the letter J
        $('.something').hide()
    }
    return false;
});​

crazy demo

Answer 3

Character-based key detection can only be done with the keypress event:

$(document).keypress(function(e) {
    var charCode = e.which;
    if (charCode) {
        var lowerCharStr = String.fromCharCode(charCode).toLowerCase();
        if (lowerCharStr == "h") {
            $('.something').show();
        } else if (lowerCharStr == "j") {
            $('.something').hide();
        }
    }
});