jQuery billentyűzetfigyelés

• Szerző: Sallai András
• Copyright © Sallai András, 2014
• Licenc: GNU Free Documentation License 1.3
• Web: https://szit.hu

<input id="bevitel">

$("#bevitel").keypress(function(e){
    var keycode = (e.keyCode ? e.keyCode : e.which);
    if(keycode == '13'){
        alert('Enter');
    }
});

Több billentyű:

$("#bevitel").keydown(function(e){
    var keycode = (e.keyCode ? e.keyCode : e.which);
    switch (keycode) {
        case 27:
            alert('ESC');
            break;
        case 13:
            alert('ENTER');
            break;
    }
});

Nyomjunk meg néhány normál és néhány speciális billentyűt.

<input id="bevitel"><br>
<div id="egy"></div>
<div id="ketto"></div>

var a = 0;
var b = 0;
$("#bevitel").keypress(function(event){
    $("#egy").text(++a);
});
$("#bevitel").keydown(function(event){
    $("#ketto").text(++b);
});

Nézzük meg milyen billentyűkódokat adnak. A keypress eseménykezelő kis és nagybetű érzékeny. A keydown eseménykezelő nem kis és nagybetűérzékeny.

<input id="bevitel"><br>
<div id="egy"></div>
<div id="ketto"></div>

var a = 0;
var b = 0;
$("#bevitel").keypress(function(event){
    $("#egy").text(event.keyCode);
});
$("#bevitel").keydown(function(event){
    $("#ketto").text(event.keyCode);
});

• keypress - case sensitive
• keydown - case insensitive