Unterschied zwischen "change" - und "input" -Ereignis für ein "input" -Element

108

Kann mir jemand sagen, was der Unterschied zwischen den changeund inputEreignissen ist?

Ich benutze jQuery, um sie hinzuzufügen:

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

Es funktioniert auch mit inputstatt change.

Vielleicht ein Unterschied in der Reihenfolge der Ereignisse in Bezug auf den Fokus?

— Gabriel Petrovay
quelle

rakshasingh.weebly.com/1/post/2012/12/… Beachten Sie, dass oninput in älteren Browsern nicht unterstützt wird. Sie können dann Folgendes verwenden: onchange, onpaste und onkeyup als Problemumgehung. PS: Ein Eingabeereignis ist auch in IE9 fehlerhaft und wird beim Löschen nicht ausgelöst.

— A. Wolff

Die Eingabe wird häufiger ausgelöst, beispielsweise nach einem Tastendruck, während die Änderung im Grunde genommen ausgelöst wird, wenn die Eingabe unscharf ist und der Wert nicht dem entspricht, der er war, als die Eingabe fokussiert wurde.

— Dandavis

Das inputEreignis erfasst auch das Einfügen. Siehe stackoverflow.com/questions/15727324/…

— Antony

TLDR: Eingabe feuert während der Eingabe, ändern Sie das Feuer, wenn Sie nach draußen klicken

— Muhammad Umer

Antworten:

117

Nach diesem Beitrag :

oninput Ereignis tritt auf, wenn der Textinhalt eines Elements über die Benutzeroberfläche geändert wird.
onchangetritt auf, wenn sich die Auswahl, der geprüfte Zustand oder der Inhalt eines Elements geändert haben . In einigen Fällen tritt dies nur auf, wenn das Element den Fokus verliert oder wenn Sie die returnEingabetaste drücken und der Wert geändert wurde. Das onchange Attribut kann mit verwendet werden: <input>, <select>, und <textarea>.

TL; DR:

oninput: Änderungen am Textinhalt
onchange::
- Wenn es ein <input />: Ändern + Fokus verlieren
- Wenn es sich um eine <select>: Änderungsoption handelt

$("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>

Erweitern Sie das Snippet

— Ionică Bizău
quelle

Der Unterschied zwischen den beiden ist mir immer noch unklar. Sie klingen nach Ihren Beschreibungen sehr ähnlich.

— Justin Morgan

@JustinMorgan Wie im JSFiddle-Beispiel tritt das onchangeauf, "wenn das Element den Fokus verliert", während das oninputbei jeder Textänderung auftritt.

— Ionică Bizău

Der Unterschied besteht darin, dass das Ereignis oninput unmittelbar nach der Änderung des Werts eines Elements auftritt, während onchange auftritt, wenn das Element den Fokus verliert, nachdem der Inhalt geändert wurde.

— NinoLopezWeb

Mit anderen Worten, "Eingabe" wird sofort ausgelöst, wenn ein Zeichen geändert, gelöscht oder hinzugefügt wird, während "Änderung" ausgewertet wird, nachdem das Steuerelement den Fokus verloren hat und nur dann erfolgt, wenn sich der Wert geändert hat

— Adam Moszczyński

Ich habe es gerade mit Chrome versucht. onchangewird auch ausgelöst, wenn Sie die Eingabetaste drücken, während Sie noch fokussieren.

— Rick

Das change eventwird in den meisten Browsern ausgelöst, wenn der Inhalt geändert wird und das Element verliert focus. Es ist im Grunde eine Ansammlung von Änderungen. Es wird nicht wie im Fall bei jeder einzelnen Änderung ausgelöstinput event .
Das input eventwird synchron ausgelöst, wenn der Inhalt des Elements geändert wird. Daher neigt der Ereignis-Listener dazu, häufiger zu feuern.
Verschiedene Browser sind sich nicht immer einig, ob für bestimmte Interaktionstypen ein Änderungsereignis ausgelöst werden soll

— Gabe
quelle

Ich glaube nicht, dass das Eingabeereignis garantiert synchron ausgelöst wird.

— Tim Down

Aktuelle Versionen aller Browser unterstützen das inputEreignis.

— Tim Down

@ TimDown, deshalb habe ich gesagt, dass die Browserunterstützung unterschiedlich ist. Nicht jeder hat die aktuelle Version jedes Browsers.

— Gabe

@ TimDown Wird es synchron ausgelöst?

— Suraj Jain

@ SurajJain: Ich bin mir nicht sicher, um ehrlich zu sein.

— Tim Down

Die MDN-Dokumentation enthält eine klare Erklärung (nicht sicher, wann sie hinzugefügt wurde):

Das Änderungsereignis wird für und Elemente ausgelöst input, wenn der Benutzer eine Änderung des Elementwerts festschreibt. Im Gegensatz zum Eingabeereignis wird das Änderungsereignis nicht unbedingt für jede Änderung des Werts eines Elements ausgelöst .selecttextarea

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

— Joel H.
quelle