Stil mit {stil}

Mar 2009

Javascript onchange • Beim Ändern eines Formularfeldes

Event-Handler für INPUT, SELECT und TEXTAREA

change ruft einen Event Handler auf, wenn ein Textfeld den Fokus verliert und seine Wert in der Zeit, in der es im Fokus war, geändert wurde. Das ist der Fall, wenn die Daten in Formularfeldern wie textarea oder select vom Benutzer geändert wurden.

Javascript Ereignis change für select

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

Javascript-Ereignis change für Checkboxen

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

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

onchange für textarea

Das Ereignis onchange fängt Änderungen innerhalb von Textfeldern ab und meldet die Änderung, sobald das textarea-Element den Fokus verloren hat (der Benutzer außerhalb des Textfeldes klickt)

function getType(event) {
   event = event || window.event;
   return event.type;
}

function didChange()
{
   var change = false;
   if (!document.getElementById) return true;
   var textField = document.getElementById('myText');
   textField.onchange = textField.onblur = function(event) {
      var response = document.getElementById('response');
      if (getType(event) == "change") {
         response.innerHTML = 'Der Text wurde geändert';
         change = true;
      } else if (!change) {
         response.innerHTML = 'Der Text wurde nicht geändert';
      }
   }	
}

Attribute für 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