onKeyPress vs. onKeyUp e onKeyDown

Qual è la differenza tra questi tre eventi? Su Google ho scoperto che:

• L' onKeyDownevento viene attivato quando l'utente preme un tasto.
• L' onKeyUpevento viene attivato quando l'utente rilascia una chiave.
• L' onKeyPressevento viene attivato quando l'utente preme e rilascia un tasto ( onKeyDownseguito da onKeyUp).

Capisco i primi due, ma non è onKeyPresslo stesso di onKeyUp? È possibile rilasciare un tasto ( onKeyUp) senza premerlo ( onKeyDown)?

Questo è un po 'confuso, qualcuno può chiarire questo per me?

Controlla qui per il link archiviato originariamente utilizzato in questa risposta.

Da quel link:

In teoria, gli eventi onKeyDowne onKeyUprappresentano i tasti premuti o rilasciati, mentre l' onKeyPressevento rappresenta un personaggio che viene digitato. L'implementazione della teoria non è la stessa in tutti i browser.

KeyPress, KeyUpE KeyDownsono analoghi a, rispettivamente: Click, MouseUp,e MouseDown.

1. Down succede prima
2. Press accade per secondo (quando viene inserito il testo)
3. Up accade per ultimo (quando l'inserimento del testo è completo).

L'eccezione è webkit , che contiene un evento aggiuntivo:

keydown
keypress
textInput     
keyup

Di seguito è riportato uno snippet che puoi utilizzare per vedere tu stesso quando gli eventi vengono generati:

window.addEventListener("keyup", log);
window.addEventListener("keypress", log);
window.addEventListener("keydown", log);

function log(event){
  console.log( event.type );
}

La maggior parte delle risposte qui sono focalizzate più sulla teoria che sulle questioni pratiche e ci sono alcune grandi differenze tra keyupe keypressper quanto riguarda i valori dei campi di input, almeno in Firefox (testato in 43).

Se l'utente digita 1in un elemento di input vuoto:

1. Il valore dell'elemento di input sarà una stringa vuota (vecchio valore) all'interno del keypressgestore

2. Il valore dell'elemento di input sarà 1(nuovo valore) all'interno del keyupgestore.

Ciò è di fondamentale importanza se si sta facendo qualcosa che si basa sulla conoscenza del nuovo valore dopo l'input anziché sul valore corrente come la convalida in linea o la tabulazione automatica.

Scenario:

1. L'utente digita 12345in un elemento di input.
2. L'utente seleziona il testo 12345.
3. L'utente digita la lettera A.

Quando l' keypressevento si attiva dopo aver inserito la lettera A, la casella di testo ora contiene solo la lettera A.

Ma:

1. Field.val () è 12345.
2. $ Field.val (). Lunghezza è 5
3. La selezione dell'utente è una stringa vuota (che impedisce di determinare cosa è stato eliminato sovrascrivendo la selezione).

Quindi sembra che il browser (Firefox 43) cancella la selezione dell'utente, quindi attiva l' keypressevento, quindi aggiorna il contenuto dei campi, quindi si attiva keyup.

onkeydownviene attivato quando il tasto è inattivo (come nelle scorciatoie; ad esempio, in Ctrl+A, Ctrlviene tenuto premuto "in basso".

onkeyup viene attivato quando viene rilasciato il tasto (compresi i tasti modificatore / etc)

onkeypressviene attivato come una combinazione di onkeydowne onkeyup, o in base alla ripetizione della tastiera (quando onkeyupnon viene attivato). (questo comportamento ripetuto è qualcosa che non ho testato. Se lo fai, aggiungi un commento!)

textInput(solo webkit) viene attivato quando viene inserito del testo (ad esempio, Shift+Ainserisce la lettera "A" maiuscola, ma Ctrl+Aseleziona il testo e non immette alcun input di testo. In tal caso, vengono attivati ​​tutti gli altri eventi)

Innanzitutto, hanno un significato diverso: sparano:

• KeyDown: quando una chiave è stata premuta verso il basso
• KeyUp - quando è stato rilasciato un pulsante premuto e dopo l'aggiornamento del valore di input / textarea (l'unico tra questi)
• KeyPress - tra quelli e in realtà non significa che un tasto sia stato premuto e rilasciato (vedi sotto).

Secondo, alcuni tasti attivano alcuni di questi eventi e non altri . Per esempio,

• Ignora KeyPress delete, frecce, PgUp/ PgDn, home/ end, ctrl, alt, shiftecc mentre KeyDown e KeyUp non (vedi dettagli sul escsottostante);
• quando si cambia finestra tramite alt+ tabin Windows, solo KeyDown per gli altincendi perché la commutazione della finestra avviene prima di qualsiasi altro evento (e KeyDown per tabè impedito dal sistema, suppongo, almeno in Chrome 71).

Inoltre, dovresti tenere presente che event.keyCode(e event.which) di solito hanno lo stesso valore per KeyDown e KeyUp ma uno diverso per KeyPress. Prova il parco giochi che ho creato. A proposito, ho notato una stranezza: in Chrome, quando premo ctrl+ ae input/ textareaè vuoto, KeyPress si attiva con event.keyCode(e event.which) uguale a 1! (quando l'ingresso non è vuoto, non si attiva affatto).

Infine, ci sono alcune pragmatiche :

• Per gestire le frecce, probabilmente dovrai usare onKeyDown: se l'utente tiene ↓, KeyDown si attiva più volte (mentre KeyUp si attiva solo una volta quando rilasciano il pulsante). Inoltre, in alcuni casi è possibile impedire facilmente la propagazione di KeyDown ma non è possibile (o non è così facile) impedire la propagazione di KeyUp (ad esempio, se si desidera inviare su invio senza aggiungere newline al campo di testo).
• Sorprendentemente, quando si tiene premuto un tasto, diciamo textarea, sia KeyPress che KeyDown si attivano più volte (Chrome 71), utilizzare KeyDown se ho bisogno dell'evento che si attiva più volte e KeyUp per il rilascio di un singolo tasto.
• KeyDown è in genere migliore per i giochi quando devi fornire una migliore reattività alle loro azioni.
• escdi solito è trasformati tramite KeyDown: KeyPress non lo fa fuoco e TastoSu comporta in modo diverso per inputs e textareas in diversi browser (per lo più a causa della perdita di messa a fuoco)
• Se desideri adattare l'altezza di un'area di testo al contenuto, probabilmente non userai onKeyDown ma piuttosto suKeyPress ( PS ok, in realtà è meglio usare onChange per questo caso ).

Ho usato tutti e 3 i miei progetti, ma sfortunatamente potrei aver dimenticato alcuni pragmatici. (da notare: c'è anche inputed changeeventi)

Questo articolo di Jan Wolter è il pezzo migliore che abbia mai trovato, puoi trovare la copia archiviata qui se il link è morto.

Spiega molto bene tutti gli eventi chiave del browser,

L' evento keydown si verifica quando viene premuto il tasto, seguito immediatamente dall'evento keypress. Quindi l' evento keyup viene generato al rilascio della chiave.

Per comprendere la differenza tra keydown e keypress , è utile distinguere tra caratteri e tasti . Un tasto è un pulsante fisico sulla tastiera del computer. Un personaggio è un simbolo digitato premendo un pulsante. Su una tastiera americana, premere il 4tasto mentre si tiene premuto il Shifttasto produce in genere un carattere "simbolo del dollaro". Questo non è necessariamente il caso di tutte le tastiere del mondo. In teoria, gli eventi keydown e keyup rappresentano i tasti premuti o rilasciati, mentre il tasto premeevento rappresenta un personaggio che viene digitato. In pratica, non è sempre così che viene implementato.

Per un po ', alcuni browser hanno lanciato un evento aggiuntivo, chiamato textInput , subito dopo la pressione del tasto . Le prime versioni dello standard DOM 3 intendevano sostituirlo all'evento keypress , ma l'intera nozione fu successivamente revocata. Webkit lo supportava tra le versioni 525 e 533 e mi è stato detto che IE lo supportava, ma non l'ho mai rilevato, probabilmente perché Webkit richiedeva che si chiamasse textInput mentre IE lo chiamava textinput .

C'è anche un evento chiamato in ingresso , supportato da tutti i browser, che viene sparato subito dopo viene apportata una modifica ad una textarea campo o di input. Generalmente il tasto verrà attivato, quindi il carattere digitato verrà visualizzato nell'area di testo, quindi verrà attivato l'input. L' evento di input in realtà non fornisce alcuna informazione su quale chiave è stata digitata - dovresti ispezionare la casella di testo per capire cosa è cambiato - quindi non lo consideriamo davvero un evento chiave e non lo documentiamo qui . Sebbene sia stato originariamente definito solo per textareas e caselle di input, credo che ci sia qualche movimento verso la generalizzazione per sparare anche su altri tipi di oggetti.

Sembra che onkeypress e onkeydown facciano lo stesso (con la piccola differenza dei tasti di scelta rapida già menzionati sopra).

Puoi provare questo:

<textarea type="text" onkeypress="this.value=this.value + 'onkeypress '"></textarea>
<textarea type="text" onkeydown="this.value=this.value + 'onkeydown '" ></textarea>
<textarea type="text" onkeyup="this.value=this.value + 'onkeyup '" ></textarea>

E vedrai che gli eventi onkeypress e onkeydown sono entrambi attivati ​​mentre viene premuto il tasto e non quando viene premuto il tasto.

La differenza è che l'evento viene attivato non una volta ma molte volte (finché si tiene premuto il tasto). Sii consapevole di ciò e gestiscili di conseguenza.

L'evento onkeypress funziona per tutti i tasti tranne ALT, CTRL, SHIFT, ESC in tutti i browser in cui l'evento onkeydown funziona per tutti i tasti. Significa che l'evento onkeydown cattura tutte le chiavi.

Volevo solo condividere una curiosità:

quando si utilizza l'evento onkeydown per attivare un metodo JS, il charcode per quell'evento NON è uguale a quello che si ottiene con onkeypress!

Ad esempio i tasti del tastierino numerico restituiranno gli stessi caratteri dei tasti numerici sopra i tasti delle lettere quando si usa onkeypress, ma NON quando si usa onkeydown!

Mi ci sono voluti alcuni secondi per capire perché il mio script che controllava determinati codici di caratteri non è riuscito quando si utilizza onkeydown!

Demo: https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

e sì. So che la definizione dei metodi è diversa .. ma la cosa molto confusa è che in entrambi i metodi il risultato dell'evento viene recuperato usando event.keyCode .. ma non restituiscono lo stesso valore .. non molto attuazione dichiarativa.

Fondamentalmente, questi eventi agiscono in modo diverso su diversi tipi e versioni di browser, ho creato un piccolo test jsBin e puoi controllare la console per scoprire come si comportano questi eventi per il tuo ambiente di destinazione, spero che questo aiuto. http://jsbin.com/zipivadu/10/edit

Risposta aggiornata:

KeyDown

• Spara più volte quando si tengono premuti i tasti.
• Firma meta chiave.

KeyPress

• Spara più volte quando si tengono premuti i tasti.
• Non non sparare le chiavi meta.

KeyUp

• Spara una volta alla fine quando si rilascia la chiave.
• Firma meta chiave.

Questo è il comportamento in entrambi addEventListenere jQuery.

https://jsbin.com/vebaholamu/1/edit?js,console,output <- prova l'esempio

(la risposta è stata modificata con la risposta corretta, screenshot ed esempio)

Alcuni fatti pratici che potrebbero essere utili per decidere quale evento gestire (eseguire lo script di seguito e concentrarsi sulla casella di input):

$('input').on('keyup keydown keypress',e=>console.log(e.type, e.keyCode, e.which, e.key))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input/>

Pressing:

• i tasti di non inserimento / digitazione (ad es Shift. Ctrl) non attiveranno a keypress. Premere Ctrle rilasciarlo:

  keydown 17 17 Controllo

  keyup 17 17 Controllo

• i tasti delle tastiere che applicano trasformazioni di caratteri ad altri caratteri possono portare a "Tasti" morti e duplicati (ad es ~. ´) keydown. Premere ´e rilasciare per visualizzare un doppio ´´:

  keydown 192 192 Dead

  keydown 192 192 ´´

  tasto 180 180 ´

  tasto 180 180 ´

  keyup 192 192 Dead

Inoltre, gli input non digitabili (ad es. A distanza <input type="range">) attiveranno comunque tutti gli eventi keyup, keydown e keypress in base ai tasti premuti.