Buchstabenzähler in Textbox implementieren

Eine Interaktion per HTML-Formular mit dem Besucher einer Web-Seite ist inzwischen Standard. Neben einem Kontaktformular, dessen ausgefüllter Inhalt meist per eMail an den Web-Betreiber verschickt wird, kommen Kommentare zu bestimmten Artikeln oder Beiträgen immer mehr in Mode, denn schließlich sorgt das Feedback der Besucher für eine bessere Qualität der Inhalte. Solche Kommentare werden zumeist in Datenbanken gespeichert, um sie später auch anderen Lesern eines Beitrages anzeigen zu können.

Beim Speichern eines solchen Kommentars steht der Entwickler der Seite meist vor einem Problem: wie groß soll das Tabellenfeld werden in das der Kommentar gespeichert wird, denn schließlich kann eine Textbox eines HTML-Formulars (Textarea) sehr viel Text aufnehmen. Alles zu speichern, kann bei einer fast immer begrenzten Datenbankgröße schnell zu einem Problem werden. Der Ansatz den Besucher so viel Text eingeben zu lassen wie er möchte und den Kommentar ab einer gewissen Länge abzuschneiden, um die Datenbank nicht zu groß werden zu lassen, ist nicht besonders geschickt und schreckt eher ab.

Das Beste wäre es, jedem Benutzer nur einen bestimmte Anzahl an Zeichen für seinen Kommentar zur Verfügung zu stellen, d.h. die Eingabe in die Textarea zu limitieren und dem Besucher während der Eingabe anzuzeigen wieviele Zeichen er noch eingeben kann. Dies mit ein wenig Javascript-Code zu bewerkstelligen ist Gegenstand dieses Artikels.

Um die Vorgehensweise zu verdeutlichen, brauchen wir zunächst ein kleines HTML-Formular:

<form method="POST" action="...">
  <textarea name="txtText" id="txtText" rows="4" cols="30"></textarea>
  <br>
  <input type="submit" value="Absenden" name="btnSend">
</form>

Zu beachten ist, dass die textarea einen Namen und eine ID mit gleichem Inhalt trägt. Somit werden von vorneherein Schwierigkeiten mit älteren Browsern vermieden.

Das action-Attribut des Formulars muss entsprechend den eigenen Gegebenheiten angepasst werden. Zumeist wird hier eine ASP- oder PHP-Seite aufgerufen, die den Inhalt des Formulars in die Datenbank schreibt.

Als nächstes wird im head des HTML-Dokuments eine Javascript-Funktion benötigt, die während der Eingabe in die Textbox einen globalen Zähler mitführt und im Falle einer Überschreitung der gewünschten Buchstabenanzahl weitere Eingaben unterdrückt:

<script type="text/javascript">

// globale Zählervariable
var charsToGo;

function charCounter(charInputSrcName, maxCharCount, outputTargetName) {

   // Zugriffsvariablen festlegen
   var charInputSrc = document.getElementById(charInputSrcName);
   var outputTargetSrc = document.getElementById(outputTargetName);

   if (charInputSrc != null) {
      // Länge des Feldinhaltes prüfen
      if (charInputSrc.value.length <= maxCharCount) {
         // Anzahl Restzeichen berechnen und Zeichenanzeige aktualisieren
         charsToGo = maxCharCount - charInputSrc.value.length;
         outputTargetSrc.innerHTML = '(' + charsToGo + '&nbsp;Zeichen)';
      }
      else
         // Eingegebenes Zeichen wieder abschneiden
         charInputSrc.value = charInputSrc.value.substring(0, maxCharCount);
         charsToGo = maxCharCount - charInputSrc.value.length;
      }
}

</script>

Die Funktion hat drei Parameter. Der Reihenfolge nach sind dies der Name der Textarea, die Anzahl der maximal zulässigen Zeichen und der Name des HTML-Objekts, das die Anzeige der noch verfügbaren Zeichen übernimmt. In Zeile 17 wird letzteres mit dem besagten Wert über die Eigenschaft innerHTML bestückt.

Da der Aufruf der Funktion bei der Eingabe von Text in der Textarea stattfinden soll, muss die HTML-Deklaration erweitern werden. Hierzu verwenden wir die drei Ereignisse onKeyDown, onKeyUp und onChange, um auf alle Fälle sicherzustellen jede Eingabe mitzubekommen.

<textarea name="txtText" id="txtText" rows="4" cols="30"
   onKeyDown="charCounter('txtText', 500, 'charCount');"
   onKeyUp="charCounter('txtText', 500, 'charCount');"
   onChange="charCounter('txtText', 500, 'charCount');"></textarea>

Nun wird die Eingabe bereits auf 500 Zeichen beschränkt. Fehlt nur noch die Ausgabe der verfügbaren Zeichen. Diese implementieren wir über eine weitere Javascript-Funktion, die das von uns gewünschte HTML-Element, hier ein span-Element, direkt auf der Seite ausgibt. Um sicherzustellen, dass bei einem etwaigen manuellen Reload der Seite durch den Benutzer auch der richtige Wert angezeigt wird, findet hier zudem noch eine Überprüfung der globalen Zählervariablen statt.

function counterOutput(charInputSrcName, maxCharCount, outputTargetName)
{
   // Zugriffsvariablen festlegen
   var charInputSrc = document.getElementById(charInputSrcName);

   // globale Variable prüfen
   if (charsToGo == null) {
      // Ausgabewert berechnen
      charsCount = maxCharCount - charInputSrc.value.length; }
   else
      // Ausgabefeld initialisieren
      charsCount = charsToGo;
         document.write('<span name=\"'
            + outputTargetName + '\" id=\"' + outputTargetName +'\">('
            + charsCount + '&nbsp;Zeichen)</span>')
}

Um die eigentliche Ausgabe kümmert sich ein kurzes Javascript-Statement an der Stelle im HTML-Code wo die Anzeige stattfinden soll. Unser HTML-Formular von oben könnte dann z.B. so aussehen:

<form method="POST" action="...">
  <textarea name="txtText" id="txtText" rows="4" cols="30"
      onKeyDown="charCounter('txtText', 500, 'charCount');"
      onKeyUp="charCounter('txtText', 500, 'charCount');"
      onChange="charCounter('txtText', 500, 'charCount');"></textarea>
  <br>
   <script language="JavaScript" type="text/javascript">
      counterOutput('txtText', 500, 'charCount');
   </script>
   <br>
   <input type="submit" value="Absenden" name="btnSend">
</form>
 

Hier ein Beispiel, wie die Eingabebegrenzung funktioniert: