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 + ' 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 + ' 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: