Javascript change / onchange • Event dem Ändern von Eingaben

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

(Obwohl select so klingt, als würde es beim Ändern einer Option in einem select-Element feuern, reagiert select nur auf das Markieren von Texten in input- bzw. textarea-Elementen.)

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 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";
}

IE onchange feuert nicht bei Enter / Return

Beim Arbeitspferd unter den Formularfeldern – bei input – kommt es zu einer lästigen Inkonsistenz zwischen den Browsern: Wenn die Eingabe des Benutzers durch ein Enter auf der Tastatur bestätigt werden soll – z.B., um ein Formular mit nur einem Eingabefeld abzusenden.

Das funktioniert in allen Browsern außer Internet Explorer (in allen Versionen).

Dabei ist Internet Explorer völlig im Recht, wenn man einen Blick auf den Standard wirft: "wenn ein Textfeld den Fokus verliert und sein Inhalt während der Zeit im Fokus geändert wurde".

Wenn ich etwas in das Feld »Suchen« eingebe und Enter drücke, verliert das input-Element den Fokus nicht, der Cursor sitzt weiterhin im Eingabefeld, onchange darf eigentlich nicht feuern.

<input type="number" id="r">

Die meisten Browser feuern trotzdem beim Return, nicht aber IE, denn das Eingabefeld hat den Fokus nicht verloren. Da wir aber an diese bequeme Variante gewöhnt sind, hilft ein Abfangen des Keycodes für »Return« – die 13.

<input type="text" id="g">
…
document.querySelector("#g").onkeypress = function (eve) {
    console.log ("eve " + eve.target);
    if (eve.keyCode == '13') {
        eve.srcElement.blur();
        eve.srcElement.setAttribute('style','background:var(--orange-color)')
    }
}

Das Script fängt das keypress-Event auf dem input-Element ab (eve.keyCode == '13') und nimmt mit eve.srcElement.blur() den Fokus vom Eingabefeld.

Attribute für Javascript onchange

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

oninput

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

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