Javascript change / onchange • Ändern von Eingabefeldern

Wenn sich ein Eingabefeld geändert hat: change

change ist das Universal-Event für Formulare und feuert beim Ändern von input (type=text), beim Ändern eines select-Felds und beim Ändern von Texten in textarea.

Javascript entdeckt das Ändern von select-Optionen durch ein change-Event.

<select id="sel">
   <option value="Stiefmütterchen">Stiefmütterchen</option>
   <option value="Primeln">Primeln</option>
   <option value="Tulpen">Tulpen</option>
</select>

<script>
let sel = document.getElementById('sel');
sel.addEventListener ("change", function () {
   let show = document.getElementById('show');
   show.innerHTML = this.value;
});
</script>

change für Range-Slider

Bei input type="range" ist das jüngere input-Event die bessere Wahl, denn change feuert erst, wenn ein Feld geändert wurde und den Fokus verliert. Bei einem Range-Slider stockt die Ausgabe also, bis der Benutzer den Thumb loslässt. Das kann ganz schön verwirrend sein.

Mal ein altmodischer, aber manchmal doch eben noch immer effizienter Einsatz eines inline-Scripts.

<input type="range" name="change" id="change" min="-4" max="4" 
       oninput="document.querySelector('.input').textContent = this.value;">
<output for="change" class="input"></output>

change für Checkboxen

Wenn das change-Event für das Abfangen von Änderungen in einem input-Feld vom Typ checkbox eingesetzt wird, erkannten Internet Explorer 6/7 erst den zweiten Klick in die Checkbox als Änderung.

Darum sollte früher das Ereignis besser über ein click-Event abgefangen werden. Bis heute spricht nichts dagegen, weiterhin click / onclick als Indikator für Checkboxen zu benutzen. input type="checkbox" erkennt Änderungen auch, wenn der Benutzer die Felder mit der Tastatur (TAB und SPACE) ändert.

change für textarea

Javascript change fängt Änderungen in Textareas und Eingabefeldern ab und meldet die Änderung, sobald das textarea-Element den Fokus verloren hat (der Benutzer außerhalb des Textfeldes klickt)

Text ändern und außerhalb des Textfelds klicken oder Return / Zurück drücken:

var changed = false; 
var textarea = document.getElementById('myText');
textarea.onchange = function() {
   var response = document.getElementById('response');
   response.innerHTML = "Der Text wurde geändert";
   changed = true;
}
textarea.onblur = function() {
   var response = document.getElementById('response');
   if (changed === false) response.innerHTML = "Der Text wurde nicht geändert";
}

Attribute für Javascript change-Events

target

Objekt zu dem das Ereignis ursprünglich gesendet wurde

eventPhase

Phase, in der das Ereignis bearbeitet wird: AT_TARGET, BUBBLING_PHASE, CAPTURING_PHASE

bubbles

true, wenn das Ereignis nach oben steigen kann

cancelable

Nein

timeStamp

Zeit in Millisekunden, zu der das Ereignis eingetreten ist

input-Event vs change-Event

Seit HTML5 gibt neben dem klassischen input type="text" auch input type="number". Das Eingabefeld zeigt Pfeile, mit denen die Eingabe heraus- bzw. heruntergezählt werden kann.

Beim Inkrement bzw. Dekrement feuert das input-Event, aber nicht das change-Event.

document.getElementById('mynum').oninput = function (eve) {
    document.getElementById('numres').innerHTML = this.value;
}