onKeyPress vs. onKeyUp et onKeyDown

Question

Quelle est la différence entre ces trois événements ? En cherchant sur Google, j'ai trouvé que :

• El onKeyDown est déclenché lorsque l'utilisateur appuie sur une touche.
• El onKeyUp est déclenché lorsque l'utilisateur relâche une touche.
• El onKeyPress est déclenché lorsque l'utilisateur appuie sur une touche et la relâche. ( onKeyDown suivi par onKeyUp ).

Je comprends les deux premiers, mais n'est-ce pas onKeyPress la même chose que onKeyUp ? Est-il possible de libérer une clé ( onKeyUp ) sans l'appuyer ( onKeyDown ) ?

C'est un peu confus, quelqu'un peut-il m'éclairer ?

Answer 1

NOTE KeyPress est maintenant déprécié . Utilisez KeyDown à la place.

KeyPress , KeyUp et KeyDown sont analogues à, respectivement : Click , MouseUp, et MouseDown .

1. Down se produit d'abord
2. Press se produit en second lieu (lorsque le texte est saisi)
3. Up se produit en dernier (lorsque la saisie du texte est terminée).

L'exception est webkit qui contient un événement supplémentaire :

keydown
keypress
textInput     
keyup

Vous trouverez ci-dessous un extrait que vous pouvez utiliser pour voir par vous-même quand les événements sont déclenchés :

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

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

Answer 2

Consultez ici les archives lien utilisé à l'origine dans cette réponse.

De ce lien :

En théorie, le onKeyDown et onKeyUp représentent des touches enfoncées ou relâchées, tandis que les événements de type onKeyPress représente un caractère en train d'être tapé. L'implémentation de la théorie n'est pas la même dans tous les navigateurs.

Answer 3

onkeydown est déclenché lorsque la touche est enfoncée (comme dans les raccourcis ; par exemple, dans la fonction Ctrl+A , Ctrl est maintenue "en bas".

onkeyup est déclenché lorsque la touche est relâchée (y compris les touches de modification/etc)

onkeypress est tiré comme une combinaison de onkeydown et onkeyup ou selon la répétition du clavier (lorsque onkeyup n'est pas renvoyé). (ce comportement répété est quelque chose que je n'ai pas testé. Si vous le faites, ajoutez un commentaire).

textInput (webkit uniquement) est déclenché lorsqu'un texte est saisi (par exemple, Shift+A saisit la majuscule "A", mais Ctrl+A sélectionnait du texte et n'en saisissait aucun. Dans ce cas, tous les autres événements sont déclenchés)

Answer 4

Il semble que onkeypress et onkeydown fassent la même chose (avec la petite différence des touches de raccourci déjà mentionnées ci-dessus).

Vous pouvez essayer ceci :

<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>

Et vous verrez que les événements onkeypress et onkeydown sont tous deux déclenchés pendant que la touche est enfoncée et non pas lorsque la touche est enfoncée.

La différence est que l'événement est déclenché non pas une fois mais plusieurs fois (tant que vous maintenez la touche enfoncée). Soyez-en conscient et traitez-les en conséquence.

Answer 5

J'ai constaté que si je maintiens la touche TAB enfoncée, tous les champs sont parcourus en continu et le déclenchement ne s'effectue qu'au moment de la fermeture.