Przechwytywanie klawisza „Usuń” za pomocą jQuery

118

Korzystając z przykładowego kodu z dokumentacji jQuery dla programu obsługi zdarzeń keypress, nie mogę przechwycić Deleteklucza. Poniższy fragment zostanie zarejestrowany 0po Deletenaciśnięciu klawisza w FireFox:

$(document).keypress(function(e) {
    console.log(e.which);       
});

Wygląda na to, że musi być sposób na przechwycenie Deleteklucza, ale jest to termin niejednoznaczny, więc Google nie okazuje się w tym zbyt pomocny.

Shane H.
źródło

Odpowiedzi:

202

Nie powinieneś używać keypresszdarzenia, ale zdarzenia keyuplub keydown, ponieważ keypresszdarzenie jest przeznaczone dla prawdziwych (drukowalnych) znaków. keydownjest obsługiwany na niższym poziomie, więc przechwytuje wszystkie niedrukowalne klucze, takie jak deletei enter.

Philippe Leybaert
źródło
keyupbyłoby lepiej wykonać pracę.
localhoost
2
@atilkan nie, użytkownik oczekuje informacji zwrotnej keydown, nie keyup. Wszystkie edytory tekstu wykonują czynności po naciśnięciu klawisza, a nie po jego zwolnieniu.
Philippe Leybaert
1
@PhilippeLeybaert W moim przypadku program nie może przechwycić ostatnio wciśniętego znaku.
localhoost
82
$('html').keyup(function(e){
    if(e.keyCode == 46) {
        alert('Delete key released');
    }
});

Źródło: kody kluczy znaków javascript z www.cambiaresearch.com

Tod Palin
źródło
18
Tak powinno być alert('Delete Key Released').
Waldheinz
jeśli ktoś użyje keypress zamiast keyup zasugerowanego przez Tod, otrzymasz zdarzenie keycode == 46 przeciwko. klawisz (kropka). ale działa dobrze z keyUp. Dzięki
Mubashar
34

Kody kluczy JavaScript

  • e.keyCode == 8 dlabackspace
  • e.keyCode == 46 dla przycisku forward backspacelub deletew komputerach PC

Z wyjątkiem tego szczegółu, odpowiedź Colina i Toda działa.

csonuryilmaz
źródło
4
Powinien to być e.keyCode, a nie e.KeyCode
Jerome
16

event.key === "Usuń"

Nowsze i znacznie czystsze: użyj event.key. Nigdy więcej dowolnych kodów liczbowych!

UWAGA: Stare właściwości ( .keyCodei .which) są przestarzałe.

document.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Delete") {
        // Do things
    }
});

Dokumenty Mozilli

Obsługiwane przeglądarki

Gibolt
źródło