Différence entre les événements «change» et «input» pour un élément «input»

109

Quelqu'un peut-il me dire quelle est la différence entre les événements changeet input?

J'utilise jQuery pour les ajouter:

$('input[type="text"]').on('change', function() {
    alert($(this).val());
})

Cela fonctionne également avec inputau lieu de change.

Peut-être une différence dans l'ordre des événements par rapport à la mise au point?

javascript jquery events dom Gabriel Petrovay
la source
rakshasingh.weebly.com/1/post/2012/12/… Notez que oninput n'est pas pris en charge dans les anciens navigateurs. Vous pouvez utiliser alors: onchange, onpaste et onkeyup comme solution de contournement. PS: l'événement oninput est également bogué dans IE9 et il n'est pas déclenché lors de la suppression.
A. Wolff du
1
l'entrée se déclenche plus souvent, comme après une pression sur une touche, alors que le changement se déclenche essentiellement lorsque l'entrée est floue et que la valeur n'est pas ce qu'elle était lorsque l'entrée était focalisée.
dandavis le
L' inputévénement capture également le collage. Voir stackoverflow.com/questions/15727324/…
Antony
1
TLDR: entrée se déclenche au fur et à mesure que vous tapez, changez de feu lorsque vous cliquez à l'extérieur
Muhammad Umer

Réponses:

117

D'après ce post :

  • oninput L'événement se produit lorsque le contenu textuel d'un élément est modifié via l'interface utilisateur.

  • onchangese produit lorsque la sélection, l'état vérifié ou le contenu d'un élément ont changé . Dans certains cas, cela se produit uniquement lorsque l'élément perd le focus ou lorsque vous appuyez sur return(Entrée) et que la valeur a été modifiée. L'attribut onchange peut être utilisé avec: <input>, <select>et <textarea>.

TL; DR:

  • oninput: toute modification apportée au contenu du texte
  • onchange:
    • Si c'est un <input />: changer + perdre le focus
    • S'il s'agit d'une <select>: modifier l'option

$("input, select").on("input", function () {
    $("pre").prepend("\nOn input. | " + this.tagName + " | " + this.value);
}).on("change", function () {
    $("pre").prepend("\nOn change | " + this.tagName + " | " + this.value);
}).on("focus", function () {
    $("pre").prepend("\nOn focus | " + this.tagName + " | " + this.value);
}).on("blur", function () {
    $("pre").prepend("\nOn blur | " + this.tagName + " | " + this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" />
<select>
  <option>Alice</option>
  <option>Bob</option>
  <option>Carol</option>
  <option>Dave</option>
  <option>Emma</option>
</select>
<pre></pre>
Développer l'extrait

Ionică Bizău
la source
7
Je ne suis toujours pas clair sur la différence entre les deux. Ils semblent très similaires d'après vos descriptions.
Justin Morgan du
10
@JustinMorgan Comme dans l'exemple JSFiddle, le onchangese produit "lorsque l'élément perd le focus" tandis que le oninputse produit à chaque changement de texte.
Ionică Bizău
1
La différence est que l'événement oninput se produit immédiatement après que la valeur d'un élément a changé, tandis que onchange se produit lorsque l'élément perd le focus, après que le contenu a été modifié.
NinoLopezWeb
1
En d'autres termes, «entrée» est déclenchée immédiatement lorsqu'un caractère est modifié, supprimé ou ajouté tandis que «changement» est évalué après que le contrôle perd le focus et se produit uniquement lorsque la valeur a changé
Adam Moszczyński
Je viens d'essayer avec Chrome. onchangese déclenche également lorsque vous appuyez sur Entrée tout en vous concentrant.
Rick
24

  • Le se change eventdéclenche dans la plupart des navigateurs lorsque le contenu est modifié et que l'élément perd focus. C'est essentiellement un ensemble de changements. Il ne se déclenchera pas pour chaque changement comme dans le cas input event.

  • Le se input eventdéclenche de manière synchrone lors du changement du contenu de l'élément. En tant que tel, l'auditeur d'événement a tendance à se déclencher plus fréquemment.

  • Différents navigateurs ne conviennent pas toujours si un événement de modification doit être déclenché pour certains types d'interaction

Gabe
la source
Je ne pense pas que l'événement d'entrée soit garanti de se déclencher de manière synchrone.
Tim Down
De plus, les versions actuelles de tous les navigateurs prennent en charge l' inputévénement.
Tim Down
2
@TimDown, c'est pourquoi j'ai dit que le support du navigateur varie. Tout le monde n'a pas la version actuelle de chaque navigateur.
Gabe
@TimDown Se déclenche-t-il de manière synchrone?
Suraj Jain
@SurajJain: Je ne suis pas sûr, pour être honnête.
Tim Down
1

La documentation MDN a une explication claire (je ne sais pas quand elle a été ajoutée):

L'événement de changement est déclenché pour input, selectet des textareaéléments lorsqu'une modification de la valeur de l'élément est déterminé par l'utilisateur. Contrairement à l'événement d'entrée, l'événement de modification n'est pas nécessairement déclenché pour chaque modification de la valeur d'un élément .

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event

Joël H
la source