[[oktatas:web:jquery|< jQuery]]

====== jQuery billentyűzetfigyelés ======


  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2014
  * Licenc: GNU Free Documentation License 1.3
  * Web: http://szit.hu
===== Billentyűkódok elkapása =====

<code html>
<input id="bevitel">
</code>

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




Több billentyű:
    
<code javascript>
$("#bevitel").keydown(function(e){
    var keycode = (e.keyCode ? e.keyCode : e.which);
    switch (keycode) {
        case 27:
            alert('ESC');
            break;
        case 13:
            alert('ENTER');
            break;
    }
});
</code>

===== 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.
<code html>
<input id="bevitel"><br>
<div id="egy"></div>
<div id="ketto"></div>
</code>


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



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. 

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


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

  * keypress - case sensitive
  * keydown - case insensitive