Acquisizione della pressione di un tasto "Elimina" con jQuery


118

Quando si utilizza il codice di esempio dalla documentazione jQuery per il gestore di eventi keypress, non sono in grado di acquisire la Deletechiave. Lo snippet di seguito verrà registrato 0quando il Deletetasto viene premuto in FireFox:

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

Sembra che ci debba essere un modo per catturare la Deletechiave, ma è un termine ambiguo, quindi Google non si sta dimostrando di grande aiuto.

Risposte:


202

Non dovresti usare l' keypressevento, ma l' evento keyupo keydownperché l' keypressevento è inteso per caratteri reali (stampabili). keydownviene gestito a un livello inferiore, quindi acquisirà tutte le chiavi non stampabili come deletee enter.


keyupsarebbe fare il lavoro meglio.
localhoost

2
@atilkan no, l'utente si aspetta un feedback keydown, no keyup. Tutti gli editor di testo eseguono azioni quando viene premuto un tasto, non quando viene rilasciato.
Philippe Leybaert

1
@PhilippeLeybaert Nel mio caso il programma non riesce a catturare l'ultimo carattere premuto.
localhoost

82
$('html').keyup(function(e){
    if(e.keyCode == 46) {
        alert('Delete key released');
    }
});

Fonte: codici di caratteri javascript codici chiave da www.cambiaresearch.com


18
Dovrebbe essere alert('Delete Key Released').
Waldheinz

se qualcuno usa la pressione dei tasti invece di keyup suggerito da Tod, allora otterresti keycode == 46 evento contro. tasto (punto). ma funziona bene con keyUp. Grazie
Mubashar

34

Codici chiave Javascript

  • e.keyCode == 8 perbackspace
  • e.keyCode == 46 per il pulsante forward backspaceo deletenei PC

Tranne questo dettaglio, la risposta di Colin e Tod's funziona.


4
Dovrebbe essere e.keyCode e non e.KeyCode
Jerome

16

event.key === "Elimina"

Più recente e molto più pulito: usa event.key. Niente più codici numerici arbitrari!

NOTA: le vecchie proprietà ( .keyCodee .which) sono deprecate.

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

Mozilla Docs

Browser supportati

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.