onKeyPress Vs. onKeyUp et onKeyDown

Quelle est la différence entre ces trois événements? Lors de la recherche sur Google, j'ai constaté que:

• L' onKeyDownévénement est déclenché lorsque l'utilisateur appuie sur une touche.
• L' onKeyUpévénement est déclenché lorsque l'utilisateur relâche une clé.
• L' onKeyPressévénement est déclenché lorsque l'utilisateur appuie et relâche une touche ( onKeyDownsuivi de onKeyUp).

Je comprends les deux premiers, mais ce n'est pas onKeyPresspareil onKeyUp? Est-il possible de relâcher une touche ( onKeyUp) sans la presser ( onKeyDown)?

C'est un peu déroutant, quelqu'un peut-il clarifier cela pour moi?

Vérifiez ici le lien archivé utilisé à l'origine dans cette réponse.

De ce lien:

En théorie, les événements onKeyDownet onKeyUpreprésentent les touches enfoncées ou relâchées, tandis que l' onKeyPressévénement représente un caractère en cours de frappe. La mise en œuvre de la théorie n'est pas la même dans tous les navigateurs.

KeyPress, KeyUpEt KeyDownsont analogues à, respectivement: Click, MouseUp,et MouseDown.

1. Down arrive en premier
2. Press arrive en second (lorsque le texte est entré)
3. Up se produit en dernier (lorsque la saisie de texte est terminée).

L'exception est le 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 lorsque 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 );
}

La plupart des réponses ici sont davantage axées sur la théorie que sur les questions pratiques et il existe de grandes différences entre keyupet keypressen ce qui concerne les valeurs des champs de saisie, au moins dans Firefox (testé en 43).

Si l'utilisateur tape 1dans un élément d'entrée vide:

1. La valeur de l'élément d'entrée sera une chaîne vide (ancienne valeur) à l'intérieur du keypressgestionnaire

2. La valeur de l'élément d'entrée sera 1(nouvelle valeur) à l'intérieur du keyupgestionnaire.

Ceci est d'une importance critique si vous faites quelque chose qui repose sur la connaissance de la nouvelle valeur après l'entrée plutôt que sur la valeur actuelle, comme la validation en ligne ou la tabulation automatique.

Scénario:

1. L'utilisateur tape 12345dans un élément d'entrée.
2. L'utilisateur sélectionne le texte 12345 .
3. L'utilisateur tape la lettre A.

Lorsque l' keypressévénement se déclenche après avoir saisi la lettre A, la zone de texte contient désormais uniquement la lettreA .

Mais:

1. Field.val () est 12345 .
2. $ Field.val (). La longueur est 5
3. La sélection de l'utilisateur est une chaîne vide (vous empêchant de déterminer ce qui a été supprimé en écrasant la sélection).

Il semble donc que le navigateur (Firefox 43) efface la sélection de l'utilisateur, puis déclenche l' keypressévénement, puis met à jour le contenu des champs, puis se déclenche keyup.

onkeydownest déclenché lorsque la touche est enfoncée (comme dans les raccourcis; par exemple, dans Ctrl+A, Ctrlest maintenu enfoncé).

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

onkeypressest déclenché comme une combinaison de onkeydownet onkeyup, ou en fonction de la répétition du clavier (lorsqu'il onkeyupn'est pas déclenché). (ce comportement répété est quelque chose que je n'ai pas testé. Si vous testez, ajoutez un commentaire!)

textInput(webkit uniquement) est déclenché lorsque du texte est entré (par exemple, Shift+Aentrerait en majuscule «A», mais Ctrl+Asélectionnerait du texte et ne saisirait aucune entrée de texte. Dans ce cas, tous les autres événements sont déclenchés)

Tout d'abord, ils ont une signification différente: ils tirent:

• KeyDown - lorsqu'une touche a été enfoncée
• KeyUp - lorsqu'un bouton poussé a été relâché , et après la mise à jour de la valeur d'entrée / zone de texte (la seule parmi celles-ci)
• KeyPress - entre ceux-ci et ne signifie pas réellement qu'une touche a été enfoncée et relâchée (voir ci-dessous).

Deuxièmement, certaines touches déclenchent certains de ces événements et n'en déclenchent pas d'autres . Par exemple,

• Ignore KeyPress delete, flèches, PgUp/ PgDn, home/ end, ctrl, alt, shiftetc tout KeyDown et KeyUp ne (voir plus de détails suresc ci - dessous);
• lorsque vous changez de fenêtre via alt+ tabdans Windows, uniquement KeyDown pour les altincendies car la commutation de fenêtre se produit avant tout autre événement (et KeyDown pour tabest empêché par le système, je suppose, au moins dans Chrome 71).

En outre, vous devez garder à l'esprit que event.keyCode(et event.which) ont généralement la même valeur pour KeyDown et KeyUp mais différente pour KeyPress. Essayez le terrain de jeu que j'ai créé. Soit dit en passant, j'ai remarqué une bizarrerie: dans Chrome, lorsque j'appuie sur ctrl+ aet que le input/ textareaest vide, pour KeyPress se déclenche avec event.keyCode(et event.which) égal à 1! (lorsque l'entrée n'est pas vide, elle ne se déclenche pas du tout).

Enfin, il y a quelques pragmatiques :

• Pour gérer les flèches, vous devrez probablement utiliser onKeyDown: si l'utilisateur le maintient ↓, KeyDown se déclenche plusieurs fois (tandis que KeyUp ne se déclenche qu'une seule fois lorsqu'il relâche le bouton). De plus, dans certains cas, vous pouvez facilement empêcher la propagation de KeyDown mais ne pouvez pas (ou ne pouvez pas le faire facilement) empêcher la propagation de KeyUp (par exemple, si vous souhaitez soumettre à l'entrée sans ajouter de nouvelle ligne au champ de texte).
• Étonnamment, lorsque vous maintenez une clé, disons textarea, KeyPress et KeyDown se déclenchent plusieurs fois (Chrome 71), j'utiliserais KeyDown si j'ai besoin de l'événement qui se déclenche plusieurs fois et KeyUp pour la libération d'une seule clé.
• KeyDown est généralement meilleur pour les jeux lorsque vous devez fournir une meilleure réactivité à leurs actions.
• escest généralement traité via KeyDown: KeyPress ne se déclenche pas et KeyUp se comporte différemment pour inputs et textareas dans différents navigateurs (principalement en raison d'une perte de concentration)
• Si vous souhaitez ajuster la hauteur d'une zone de texte au contenu, vous n'utiliserez probablement pas onKeyDown mais plutôt onKeyPress ( PS ok, il est en fait préférable d'utiliser onChange pour ce cas ).

J'ai utilisé les 3 dans mon projet, mais j'ai peut-être malheureusement oublié certains aspects pragmatiques. (à noter: il y a aussi inputet changeévénements)

Cet article de Jan Wolter est la meilleure pièce que j'ai rencontrée, vous pouvez trouver la copie archivée ici si le lien est mort.

Il explique très bien tous les événements clés du navigateur,

L' événement keydown se produit lorsque la touche est enfoncée, suivi immédiatement de l'événement keypress. Ensuite, l' événement keyup est généré lorsque la clé est relâchée.

Pour comprendre la différence entre les touches enfoncées et les touches , il est utile de faire la distinction entre les caractères et les touches . Une clé est un bouton physique sur le clavier de l'ordinateur. Un caractère est un symbole tapé en appuyant sur un bouton. Sur un clavier américain, frapper le4 appuyer touche tout en maintenant la Shifttouche enfoncée produit généralement un caractère "signe dollar". Ce n'est pas nécessairement le cas sur tous les claviers du monde. En théorie, la keydown et KeyUp événements représentent les touches enfoncée ou relâchée, tandis que l' pression de toucheévénement représente un caractère d' être tapé. Dans la pratique, ce n'est pas toujours ainsi que cela est mis en œuvre.

Pendant un certain temps, certains navigateurs ont déclenché un événement supplémentaire, appelé textInput , immédiatement après avoir appuyé sur la touche . Les premières versions de la norme DOM 3 envisageaient cela comme un remplacement pour l' événement de pression de touche , mais toute la notion a ensuite été révoquée. Webkit l'a pris en charge entre les versions 525 et 533, et on me dit qu'IE l'a pris en charge, mais je n'ai jamais détecté cela, probablement parce que Webkit exigeait qu'il soit appelé textInput tandis qu'IE l'a appelé textinput .

Il existe également un événement appelé entrée , pris en charge par tous les navigateurs, qui est déclenché juste après qu'une modification a été apportée à une zone de texte ou à un champ de saisie. En règle générale, une pression sur une touche se déclenche, puis le caractère tapé apparaît dans la zone de texte, puis l'entrée se déclenche. L' événement d' entrée ne donne en fait aucune information sur la clé qui a été tapée - vous devez inspecter la zone de texte pour comprendre ce qui a changé - nous ne le considérons donc pas vraiment comme un événement clé et ne le documentons pas vraiment ici . Bien qu'il ait été initialement défini uniquement pour les zones de texte et les zones de saisie, je pense qu'il y a un certain mouvement vers sa généralisation pour tirer également sur d'autres types d'objets.

Il semble que onkeypress et onkeydown fassent de même (avec la petite différence de touches de raccourci déjà mentionnée 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 lorsque la touche est enfoncée et non 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 conscient de cela et gérez-les en conséquence.

L'événement onkeypress fonctionne pour toutes les clés sauf ALT, CTRL, SHIFT, ESC dans tous les navigateurs où l'événement onkeydown fonctionne pour toutes les clés. Signifie que l'événement onkeydown capture toutes les clés.

Je voulais juste partager une curiosité:

lorsque vous utilisez l'événement onkeydown pour activer une méthode JS, le code de caractère de cet événement n'est PAS le même que celui que vous obtenez avec onkeypress!

Par exemple, les touches du pavé numérique renverront les mêmes codes de caractères que les touches numériques au-dessus des touches alphabétiques lors de l'utilisation de onkeypress, mais PAS lors de l'utilisation de onkeydown!

Cela m'a pris quelques secondes pour comprendre pourquoi mon script qui vérifiait certains charcodes a échoué lors de l'utilisation de onkeydown!

Démo: https://www.w3schools.com/code/tryit.asp?filename=FMMBXKZLP1MK

et oui. Je sais que la définition des méthodes est différente .. mais ce qui est très déroutant, c'est que dans les deux méthodes, le résultat de l'événement est récupéré en utilisant event.keyCode .. mais ils ne renvoient pas la même valeur .. pas très mise en œuvre déclarative.

Fondamentalement, ces événements agissent différemment selon le type et la version du navigateur, j'ai créé un petit test jsBin et vous pouvez vérifier la console pour savoir comment ces événements se comportent pour votre environnement cible, espérons cette aide. http://jsbin.com/zipivadu/10/edit

Réponse mise à jour:

Touche Bas

• Se déclenche plusieurs fois lorsque vous maintenez les touches enfoncées.
• Déclenche une méta-clé.

Appuyez sur la touche

• Se déclenche plusieurs fois lorsque vous maintenez les touches enfoncées.
• Ne déclenche pas de méta-clés.

KeyUp

• Se déclenche une fois à la fin lorsque vous relâchez la touche.
• Déclenche une méta-clé.

C'est le comportement des deux addEventListeneret jQuery.

https://jsbin.com/vebaholamu/1/edit?js,console,output <- exemple d'essai

(la réponse a été modifiée avec la bonne réponse, capture d'écran et exemple)

Quelques faits pratiques qui pourraient être utiles pour décider de l'événement à gérer (exécutez le script ci-dessous et concentrez-vous sur la zone de saisie):

$('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/>

Pressage:

• les touches non insérées / tapées (par exemple Shift, Ctrl) ne déclencheront pas a keypress. Appuyez Ctrlet relâchez:

  keydown 17 17 Contrôle

  keyup 17 17 Contrôle

• les clés des claviers qui appliquent des transformations de caractères à d'autres caractères peuvent entraîner la mort et la duplication de "clés" (par exemple ~, ´) keydown. Appuyez ´et relâchez-le pour afficher un double ´´:

  keydown 192192 Dead

  keydown 192 192 ´´

  touche 180 180 ´

  touche 180 180 ´

  keyup 192192 Dead

De plus, les entrées ne tapant pas (par exemple, à distance <input type="range">) déclencheront toujours tous les événements de touches, de touches et de touches en fonction des touches enfoncées.