Ein Wörter- bzw. Buchstabenzähler kann für den Benutzer von großem Nutzen sein. Wenn ihm (z.B. aus technischen Gründen) nur eine bestimmte Anzahl von Zeichen zur Verfügung stehen, sieht er bereits bei der Eingabe, wie viele Zeichen er noch schreiben kann. Beim Verfassen längerer Texte ist ein Wörterzähler hilfreich, denn so kann der Benutzer ungefähr abschätzen wie lang sein Text bereits ist.

• Beim Schreiben von Kurznachrichten (SMS) ist die maximale Anzahl von Zeichen begrenzt. Bei privaten Nachrichten in Foren, oder Kontaktformularen gibt es oft ähnliche Begrenzungen. Hier ist eine Anzeige der noch verfügbaren Zeichen sinnvoll.
• Eine Anzeige der Wortzahl ist beispielsweise für einen Redakteur oder Blogger nützlich, denn so sieht er ob er seinen Text vielleicht etwas kürzen, oder noch etwas mehr schreiben sollte.

In diesem Artikel stelle ich einen einfachen Buchstabenzähler bzw. Wörterzähler in Form einer Java Script-Klasse vor, und erkläre seine Funktionsweise.

Der Wörter- bzw. Buchstabenzähler

Die Zählerklasse ist in der Lage die Wörter und Buchstaben in einem Eingabefeld zu zählen. Außerdem können Angaben zur maximalen Anzahl von Zeichen/Wörtern gemacht werden, zusätzlich kann eine Funktion angegeben werden, welche beim Überschreiten der maximalen Anzahl aufgerufen wird.

Die Zählerklasse
Beispielseite (Texteingabe mit Wörter- und Zeichenzähler)

Benutzung der Klasse

Beim Erstellen der Klasse wird die ID des Eingabeelementes angegeben, dessen Inhalt ausgewertet werden soll. Sobald eine der Zählerfunktionen aufgerufen wird, bindet die Klasse die Funktion zum Zählen der Zeichen bzw. die zum Zählen der Wörter an die onchange- und onkeyup-Ereignisse. Bei jeder Veränderung des Textes wird neu gezählt und die Anzeige aktualisiert.

// Wenn der Zähler sofort loszählen soll, kann er einfach beim onload-
// Ereignis initialisiert werden.
window.onload = function () {
	// Wörter- und Buchstabenzähler initialisieren
	// 'text' ist die ID des Eingabefeldes
	var eingabenzaehler = new EingabenZaehler('text');
 
	// Maximale Anzahl an Buchstaben festlegen. (450)
	// 'bmax' ist die ID des Elements, in dem die maximale Anzahl von 
	// Buchstaben angezeigt wird. text_einfaerben ist die Funktion, 
	// die beim Überschreiten der max. Anzahl aufgerufen wird
	eingabenzaehler.maxBuchstaben(450, 'bmax', text_einfaerben);
	// Diese Funktion hat auch noch einen vierten, optionalen Parameter,
	// der festlegt, wie lang ein Wort maximal sein darf. Ab dieser Zahl wird es
	// als mehrere Wörter gezählt. Die Voreinstellung ist 50. Ein Wort aus 153
	// Zeichen würde also als 3 Wörter gezählt werden.
 
	// Man könnte auch eine max. Anzahl Wörter festlegen.
	// eingabenzaehler.maxWoerter(100, 'wmax', max_woerter);
 
	// Wörterzähler aktivieren, 'wz' ist die ID des Elements in dem
	// die Anzahl der Wörter angezeigt wird.
	eingabenzaehler.woerterZaehler('wz');
 
	// Buchstabenzähler aktivieren, 'bz' ist die ID des Elements in dem
	// die Anzahl der Buchstaben angezeigt wird.
	eingabenzaehler.buchstabenZaehler('bz');
};

Die beim Erreichen der maximalen Zeichen/Wort-Anzahl aufgerufene Funktion muss einen Parameter annehmen, welcher angibt ob die max. Anzahl überschritten wurde. Wenn die max. Anzahl überschritten wurde, wird true als 1. Parameter mitgeliefert, ansonsten false. Die Funktion könnte beispielsweise so aussehen:

function text_einfaerben(drueber) {
	// Variablen initialisieren (beim ersten Aufruf)
	if (typeof this.geaendert == 'undefined') {
		this.geaendert = false;
		this.alteFarbe = document.getElementById('warnung').style.color;
	}
	// max. Anzahl überschritten, färbe Text rot ein.
	if (drueber && this.geaendert === false) {
		this.geaendert = true;
		document.getElementById('warnung').style.color = 'red';
	}
	// max. Anzahl nicht oder nicht mehr überschritten, normale Farbe.
	else if (drueber === false) {
		this.geaendert = false;
		document.getElementById('warnung').style.color = this.alteFarbe;
	}
}

Funktionsweise

Das Zählen der Zeichen in einem Eingabefeld gestaltet sich ziemlich einfach. Jedes Text-Eingabefeld hat die Eigenschaft value, in der der eingegebene Text enthalten ist. Diese Eigenschaft hat wiederum die Eigenschaft length, die angibt wie viele Zeichen der Text enthält.

anzahl = eingabefeld.value.length;

Herauszufinden, aus wie vielen Wörtern ein Text besteht, ist hingegen schon schwieriger. Es genügt nicht, einfach alle Leerzeichen zu zählen, denn so würden mehrere Leerzeichen auch als mehrere Wörter gezählt werden. Außerdem gibt es noch andere Zeichen, mit denen Wörter getrennt werden können, beispielsweise Tabulatoren, Zeilenumbrüche oder Kommata.

Die Klasse geht zum Zählen der Wörter den gesamten Text Zeichen für Zeichen durch, und merkt sich mittels der Variable imwort ob der Zeiger sich gerade in einem Wort befindet, oder nicht. Immer wenn ein Zeichen kommt, welches kein Teil eines Wortes ist (Leerzeichen, Zeilenumbruch, Komma, Punkt, etc.) wird die Anzahl der Wörter um eins erhöht und die Variable imwort zurückgesetzt. Die imwort-Variable wird gleichzeitig dazu verwendet die Länge eines Wortes zu erfahren, so dass sehr lange Wörter als mehrere Wörter gezählt werden.

Eine Funktion, die es verhindert, das der Benutzer weiterschreibt, wenn die max. Wort/Zeichen-Anzahl erreicht ist hat die Klasse ebenfalls nicht. Solche Funktionen behindern den Benutzer nur, und können ohnehin leicht umgangen werden. Solche Funktionen verhindern, dass der Benutzer seinen Text erst einmal zu Ende schreibt, und dann guckt, was er weglassen kann, um die Begrenzung einzuhalten.

Verbesserungsmöglichkeiten

Bei jeder Veränderung, und jedem neuen Zeichen zählt die Klasse neu, bei längeren Texten und älteren Rechnern kann das die Ausführung ziemlich verlangsamen. Man könnte die Klasse aber einfach so umschreiben, das nur alle X Sekunden neu gezählt wird, und nicht bei jeder Veränderung.

• Farbauswahl-Dialog mit ColorPicker
• Fortschrittsbalken mit CSS/JavaScript
• Formulare: Datei-Element umgestalten
• Geteilte Eingabe
• Absenden, Zurücksetzen und Verlassen von Formularen