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?

— Gabriel Petrovay
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

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

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
source

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

@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

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

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

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

@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

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
source