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

Letzte Posts aus unserem Forum

Probleme mit iphone

Hallo, ich habe ein Problem bei der Darstellung einer Webseite. In allen Browsern hat das bisher bestens funktioniert außer beim iPhone und iPad, wo ... » mehr

von Finlay am Dienstag, 10. Juli 2012 19:45 in JavaScript - noch nicht beantwortet

Stream musik

Hallo, ich bin auf der Suche nach einem Script, mit dem ich einen Leser für Audio-Spuren in eine Html-Webseite einfügen kann. Ich brauche dabei ... » mehr

von Finlay am Sonntag, 22. Januar 2012 22:52 in JavaScript - bisher 2 Antworten
Letzter Beitrag: Dienstag, 8. Mai 2012 16:04 von maharadja

ich habe das mal mit jplayer probiert und bei mir gings ... » mehr

Byte Array PDF im Browser anzeigen

Hallo, ich bekomme von einem Webservice ein PDF als Byte Array. Mit einem JsonP Request habe ich das Byte Array so wie es ist (als Array von Bytes) ... » mehr

von TiloS am Mittwoch, 11. April 2012 17:37 in JavaScript - noch nicht beantwortet

Überbelnd effect in javascript gallerie

ich habe hier einie gallerie die funktioniert problem los aber hat noch kein über belnd effect jedoch würde ich diesen gerne einfügen aber ich habe ... » mehr

von faebe am Freitag, 20. Januar 2012 20:19 in JavaScript - noch nicht beantwortet

XML per JavaScript verarbeiten - IE

Hallo! Vielen Dank für das super kommentierte Script-Beispiel zur Weiterverarbeitung von XML-Dateien per JavaScript: ... » mehr

von gn0me am Freitag, 11. März 2011 19:03 in JavaScript - noch nicht beantwortet


¬ Insolvenzrecht