Zeichenzähler mit JavaScript erstellen

Viele Eingabefelder in Formularen erlauben eine vordefinierte Anzahl an Zeichen. Alles, was darüber hinaus geht, wird nicht mehr angezeigt. Natürlich ist es an dieser Stelle sinnvoll, dem Besucher auch zu zeigen, wie viele Zeichen er noch übrig hat. Dazu kannst du einen Zeichenzähler verwenden.

Mit Hilfe von JavaScript ist dies ohne größeren Aufwand möglich. Füge einfach das folgende JavaScript in deine Webseite ein.

 

Code-Beispiel:

<html>
 <head>
 <script language="JavaScript">
 <!--
 function RestlicheZeichenErmitteln(form)
 {
     var ErlaubteAnzahl = 200;
 
     var Laenge = document.Formular.Nachricht.value.length;
 
     if(Laenge > ErlaubteAnzahl)
     {
         document.Formular.Nachricht.value = document.Formular.Nachricht.value.substring(0, ErlaubteAnzahl);
         RestlicheZeichen = 0;
     }
     else
     {
         RestlicheZeichen = ErlaubteAnzahl-Laenge;
     }
 
     document.Formular.Laenge.value = RestlicheZeichen;
 }
 //-->
 </script>
 <title>Maximale Anzahl an Zeichen anzeigen lassen</title>
 </head>
 <body>
 
 <form name="Formular">
 Noch <input size="3" name="Laenge" value="200"> Zeichen<br />
 Ihre Eingabe <textarea cols="30" name="Nachricht" onblur="RestlicheZeichenErmitteln(this);" onchange="RestlicheZeichenErmitteln(this);" onfocus="RestlicheZeichenErmitteln(this);" onkeydown="RestlicheZeichenErmitteln(this);" onkeyup="RestlicheZeichenErmitteln(this);" rows="5"></textarea>
 </form>
 
 </body>
 </html>

 

Erläuterung:

Über dem eigentlichen Textfeld erscheint ein kleines Input-Feld. Dieses zählt automatisch die Zeichen, die bereits im Textfeld eingegeben wurden. Dieses Ergebnis zieht das Script von dem Maximalwert der einzugebenden Zeichen ab. Das Ergebnis wird dann auch im Input-Feld wieder ausgegeben.

Das Script funktioniert nicht mehr, wenn der Gast JavaScript im Browser deaktiviert hat oder es ein Plugin blockt. An dieser Stelle hast du dann keine Möglichkeit mehr, mit diesem Script einen Zeichenzähler anzuzeigen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.