Zeichenzähler mit JavaScript erstellen

In manchen Formularen kann man einige Felder nur mit einer bestimmten Anzahl an Zeichen füllen. Das hast du sicher auch selbst schon mal gesehen. Diese Beschränkung auf eine bestimmte Anzahl von Zeichen ist dabei nicht neu und wird häufig eingesetzt. Wenn du das auch in deinen Formularen nutzt, solltest du dem User zeigen, wie viele Zeichen er noch übrig hat. Dazu kannst du einen Zeichenzähler verwenden.

Mit Hilfe von JavaScript ist das dazu auch ohne großen Aufwand möglich. In diesem Beitrag zeige ich dir schließlich, wie das funktioniert.

 

Mit JavaScript einen Zeichenzähler erstellen

Mit diesem Script bist du dabei in der Lage, einen eigenen Zeichenzähler in deine Website einzubauen. Du kannst dazu entweder das Beispiel hier komplett nehmen, oder du baust die Bestandteile in deine bereits vorhandene Seite ein.

 

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>

 

Erklärung:

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

Das Script funktioniert nicht, wenn der Gast JavaScript im Browser deaktiviert hat oder es ein durch ein Plugin blockt. Ist das der Fall, zeigt der Browser das Script – und somit auch den Zeichenzähler – nicht mehr an.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

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