JavaScript Event Beispiel 3: Informationen zum Element, auf dem ein Event stattgefunden hat

Textarea:<br> <textarea name="kommentar" maxlength="10"></textarea><br>
Zeichen verf&uuml;gbar: <span id="kommentar_free">10/10</span>
<script language="javascript" type="text/javascript">
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Allgemeiner Event-Handler für ein Texteingabefeld
// Es wird, neben der maximalen Anzahl der Zeichen die im Eingabefeld erlaubt sind,
// die Anzahl der Zeichen ausgegeben, die im Eingabefeld noch zur Verfügung stehen.
// Auf das Element, in dem das Event aufgetreten ist, kann per
// this zugegriffen werden.
// Die Ausgabe der Statusinformationen erfolgt, sofern ein solches existiert, in
// einem Element mit der ID "NAME_EINGABEFELD"_free.
function updateLength (event) {
  // Ausgabe einer Fehlermeldung, wenn kein Ausgabefeld zur Ausgabe der verfügbaren
  // Zeichen für das entsprechende Eingabefeld existiert
  if (!document.getElementById (this.name + '_free')) {
    alert ('Achtung: Ausgabeelement zur Anzeige der freien Zeichen\n' +
           ' f\u00fcr das Eingabefeld ' + this.name + ' existiert nicht!');
    return;
  }

  // Handelt es sich um ein Eingabefeld für Text?
  if (this.type == 'text' ¦¦ this.type == 'textarea' ¦¦ this.type == 'password') {
    // Maximale Länge des Eingabefeldes ermitteln
    if (this.type != 'textarea')
      // normale Textfelder besitzen die Eigenschaft maxlength
      max = this.maxLength;
    else {
      // Textareas müssen anders behandelt werden, da es hier normalerweise
      // keine maxlength gibt. Sie muss aber definiert sein, damit das
      // Script funktioniert.
      if (this.attributes['maxlength'])
        max = this.attributes['maxlength'].nodeValue;
      else
        max = 0;
    }

    // Anzahl der bisher eingegebenen Zeichen ermitteln
    len = this.value.length;

    // Maxlength im Eingabefeld definiert?
    if (max > 0) {
      // Bei Textareas, welche die Eigenschaft maxlength nicht
      // kennen, muss die maximale Länge des Eingabefeldes
      // beachtet werden. Normale Textfelder verhindern die
      // Eingabe überzähliger Zeichen automatisch.
      if (len > max) {
        // Inhalt des Feldes abschneiden, wenn zu lang...
        this.value = this.value.substr (0, max);
        // und Größe des Inhalts neu setzen.
        len = max;
      }
      // Ausgabe der noch verfügbaren Zeichen und der maximalen Anzahl der Zeichen
      // im entsprechenden Ausgabefeld
      document.getElementById (this.name + '_free').firstChild.data = max - len + '/' + max;
      // Inhalt des Ausgabefeldes mit roter Textfarbe hervorheben, wenn verfügbare
      // Zeichen aufgebraucht sind
      document.getElementById (this.name + '_free').style.color = (max - len == 0 ? 'red' : '');
    }
    else {
      // Fehlermeldung: Hinweis bei fehlender maxlength-Eigenschaft ausgeben
      document.getElementById (this.name + '_free').firstChild.data = 'MAXLENGTH im Eingabefeld nicht definiert!';
      // Hervorhebung der Fehlermeldung durch rote Textfarbe
      document.getElementById (this.name + '_free').style.color = 'red';
    }
  }
}

// Event-Handler für die Textarea ist updateLength
document.getElementsByName ('kommentar')[0].onkeyup = updateLength;
// -->
</script>

Textarea:

Zeichen verfügbar: 10/10



¬ Insolvenzrecht