Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:jquery:jquery_billentyuzetfigyeles

< jQuery

jQuery billentyűzetfigyelés

  • Szerző: Sallai András
  • Copyright © Sallai András, 2014
  • Licenc: GNU Free Documentation License 1.3

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
oktatas/web/jquery/jquery_billentyuzetfigyeles.txt · Utolsó módosítás: 2019/08/22 20:21 szerkesztette: admin