jQuery billentyűzetfigyelés

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

Billentyűkódok elkapása

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

A keypress és a keydown közötti különbség

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