CSS, HTML und Javascript mit {stil}

Javascript onchange • Ändern eines Formularfeldes

Javascript on change – Formularfeld hat sich verändert

Javascript onchange ruft einen Event Handler auf, wenn ein Textfeld den Fokus verliert und sein Inhalt während der Zeit im Fokus geändert wurde.

Event für INPUT, SELECT und TEXTAREA

onchange 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 onselect so klingt, als würde es beim Ändern einer Option in einem select-Element feuern, reagiert onselect auf das Markieren von Texten in input- bzw. textarea-Elementen.

select onchange

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

<script type="text/javascript">
   var sel = document.getElementById('sel');
   sel.onchange = function() {
      var show = document.getElementById('show');
      show.innerHTML = this.value;
   }
</script>

onchange für Checkboxen

Wenn das onchange-Event eingesetzt wird, um eine Änderung in einem input-Feld vom Typ checkbox abzufangen, erkennen Internet Explorer 6/7 erst den zweiten Klick in die Checkbox als Änderung.

rot grün blau

Also sollte als auslösendes Ereignisse für Checkboxen besser das Ereignis onclick abgefangen werden.

onchange für textarea

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

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 onkeypress="checkEnter()" type="text" id="g">
…
function checkEnter(e) {
	e = e || window.event;
	if (e.keyCode == '13') {
		e.srcElement.blur();
		return false;
	}
	return false;
}

var g = document.getElementById('g')	
g.addEventListener('change',function (eve) {
	document.getElementById('resg').innerHTML = …;
}, true);

Das Script fängt das keypress-Event auf dem input-Element ab (e.keyCode == '13') und nimmt mit e.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 Event oninput.

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