web-dev-qa-db-fra.com

onKeyPress Vs. onKeyUp et onKeyDown

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

L'événement KeyDown est déclenché lorsque l'utilisateur appuie sur une touche.

L'événement KeyUp est déclenché lorsque l'utilisateur relâche une clé.

L'événement KeyPress est déclenché lorsque l'utilisateur appuie sur une touche et la relâche. (onKeyDown suivi de onKeyUp)

Je comprends les deux premiers, mais KeyPress n'est-il pas identique à KeyUp? (ou est-il possible de relâcher une touche (KeyUp) sans appuyer sur (KeyDown)?)

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

javascriptdomdom-events
277
instantsetsuna

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

À partir de ce lien:

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

167
dcp

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

  1. Down arrive en premier
  2. Press arrive en second lieu (quand le texte est entré)
  3. Up arrive en dernier (lorsque la saisie de 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 le moment où 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 );
}
156
Robusto

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

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

onkeypress est déclenché par une combinaison de onkeydown et onkeyup, ou selon la répétition au clavier (lorsque onkeyup n'est pas déclenché). (Ce comportement de répétition est quelque chose que je n'ai pas testé. Si vous testez, ajoutez un commentaire!)

textInput (kit Web uniquement) est déclenché lorsque du texte est entré (par exemple, Shift+A entrerait la lettre majuscule 'A', mais Ctrl+A sélectionnerait du texte et ne saisirait aucune entrée de texte. cas, tous les autres événements sont déclenchés)

14
arunjitsingh

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

Si l'utilisateur tape 1 dans 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 gestionnaire keypress.

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

Ceci est d'une importance cruciale 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 telle que la validation en ligne ou la tabulation automatique.

Scénario:

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

Lorsque l'événement keypress se déclenche après la saisie de la lettre A, la zone de texte ne contient plus que la lettre A.

Mais:

  1. Field.val () est 12345.
  2. $ Field.val (). Length 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. alors déclenche l'événement keypress, alors met à jour le contenu des champs, puis déclenche keyup.

14
Nick

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 pendant que 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 manipulez-les en conséquence.

10
Falk

Premièrement, ils ont une signification différente: ils tirent:

  • KeyDown - lorsqu'une touche était enfoncée
  • KeyUp - lorsqu'un bouton enfoncé était relâché , et après la valeur de input/textarea est mis à jour (le seul parmi ceux-ci)
  • KeyPress - entre ceux-ci et ne signifie pas réellement 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,

  • KeyPress ignore delete, flèches, PgUp/PgDn, home/end, ctrl, alt, shift etc alors que KeyDown et KeyUp ne le sont pas (voir les détails sur esc au dessous de);
  • lorsque vous changez de fenêtre via alt+tab sous Windows, seul KeyDown pour alt se déclenche car la commutation de fenêtre se produit avant tout autre événement (et KeyDown pour tab est évité par le système, je suppose, au moins dans Chrome 71).

De plus, vous devez garder à l'esprit que event.keyCode (et event.which) ont généralement la même valeur pour KeyDown et KeyUp, mais une valeur différente pour KeyPress. Essayez le terrain de je que j'ai créé. Au fait, j’ai remarqué un problème: dans Chrome, quand j’appuie sur ctrl+a et la input/textarea est vide, 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 manipuler les flèches, vous devrez probablement utiliser onKeyDown: si l'utilisateur est en attente ↓, KeyDown se déclenche plusieurs fois (alors que KeyUp ne se déclenche qu’une fois lorsqu’ils relâchent le bouton). De plus, dans certains cas, vous pouvez facilement empêcher la propagation de KeyDown mais pas (ou ne pouvez pas facilement) empêcher la propagation de KeyUp (par exemple, si vous souhaitez soumettre en entrée sans ajouter de nouvelle ligne au champ de texte).
  • Étonnamment, lorsque vous tenez une clé, par exemple dans textarea, KeyPress et KeyDown se déclenchent plusieurs fois (Chrome 71), j'utilisais KeyDown si j'avais besoin de l'événement qui se déclenche plusieurs fois et KeyUp pour le relâchement d'une clé unique.
  • KeyDown est généralement préférable pour les jeux lorsque vous devez fournir une meilleure réactivité à leurs actions.
  • esc est 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 focus)
  • 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 préférable d'utiliser onChange dans ce cas ).

J'ai utilisé les 3 dans mon projet mais j'ai peut-être malheureusement oublié une partie de la pragmatique. (à noter: il y a aussi input et change événements)

10
YakovL

Ceci article par Jan Wolter est le meilleur morceau que j'ai rencontré, 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 l'utilisateur appuie sur la touche, suivi immédiatement de l'événement de pression de touche. Ensuite, l'événement keyup est généré lorsque la clé est relâchée.

Pour comprendre la différence entre keydown et touche pressée, il est utile de faire la distinction entre les caractères et clés . Une touche est un bouton physique du clavier de l'ordinateur. Un caractère est un symbole saisi en appuyant sur un bouton. Sur un clavier américain, frapper le 4 touche tout en maintenant la Shift clé 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, les événements keydown et keyup représentent les touches enfoncées ou relâchées, tandis que l'événement keyypress représente un caractère saisi. En pratique, ce n'est pas toujours la façon dont elle est mise en œuvre.

Pendant un moment, certains souffleurs ont déclenché un événement supplémentaire, appelé textInput, immédiatement après keypress. Les premières versions de la norme DOM 3 voulaient remplacer cela par l'événement keypress, mais cette notion a été révoquée par la suite. Webkit l’a prise en charge entre les versions 525 et 533, et on me dit que IE l’a pris en charge, mais je ne l’ai jamais détecté, probablement parce que Webkit avait besoin de l’appeler textInput alors que IE l'appelait textinput .

Il existe également un événement appelé input, pris en charge par tous les navigateurs, qui est déclenché juste après la modification d'un champ textarea ou d'un champ de saisie. En général, vous appuyez sur la touche et le caractère saisi apparaît dans la zone de texte, puis les entrées sont activées. L'événement input ​​ne donne aucune information sur la clé tapée - vous devez inspecter la zone de texte pour déterminer ce qui a changé - nous ne le considérons donc pas vraiment comme un événement clé. ne le documentez pas vraiment ici. Bien qu’il ait été défini à l’origine uniquement pour les zones de texte et les zones de saisie, je pense qu’il existe une tendance à la généraliser afin qu’il soit également utilisé pour d’autres types d’objets.

8
Suraj Jain

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.

8
Mohd Sadiq

Je voulais juste partager une curiosité:

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

Par exemple, les touches du pavé numérique renverront les mêmes codes de caractères que les touches numériques situées au-dessus des touches alphabétiques lorsque vous utilisez onkeypress, mais PAS si vous utilisez onkeydown!

Il m'a fallu pas mal de secondes pour comprendre pourquoi mon script qui vérifiait certains codes de caractère échouait 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é à l'aide de event.keyCode .. mais elles ne renvoient pas la même valeur .. pas très implémentation déclarative.

3
Drummer

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 consulter la console pour savoir comment ces événements se comportent dans votre environnement ciblé. J'espère que cette aide vous sera utile. http://jsbin.com/zipivadu/10/edit

2
Ken Chan

KeyDown - lorsque vous appuyez physiquement sur la touche

KeyUp - lorsque vous relâchez physiquement une clé

KeyPress - lors de la saisie des caractères ... KeyPress se déclenchera plusieurs fois si vous maintenez enfoncé une clé, où comme les autres ne tireront qu'une fois.

0
Quang Van