Buchstabenzähler
Zählt die Zeichen in einem Eingabefeld mit — die Anzahl aktualisiert sich schon beim Tippen.
Dieses Script zählt die Zeichen in einem Eingabefeld und zeigt die Anzahl sofort an — ihr müsst nichts abschicken und nichts anklicken, die Zahl wandert schon beim Tippen mit. Gezählt wird alles, was im Feld steht: Buchstaben, Ziffern, Satzzeichen, Sonderzeichen und auch Leerzeichen und Zeilenumbrüche.
Probiert es unten einfach aus: In das Textfeld tippen oder einen Text hineinkopieren, und darunter erscheint die Zeichenzahl. Auch beim Einfügen mit der Maus oder beim Löschen aktualisiert sich der Zähler zuverlässig.
Praktisch ist so ein Zähler überall dort, wo eine Länge einzuhalten ist: Kurznachrichten und Statusmeldungen mit fester Zeichengrenze, Seitentitel und Beschreibungstexte für Suchmaschinen, Steckbriefe in Formularen oder Kommentarfelder mit Höchstlänge. Wer sich an einer Obergrenze orientiert, sieht auf einen Blick, wie viel noch übrig ist.
Eine Feinheit am Rande: „Zeichen" ist nicht ganz dasselbe wie „Buchstaben, die man sieht". JavaScript speichert Text intern in Einheiten von je 16 Bit; die meisten Schriftzeichen brauchen davon eine, seltenere Zeichen wie Emoji aber zwei. Ein Emoji zählt in dieser einfachen Zählung deshalb als zwei Zeichen — genauso, wie es viele Dienste mit Zeichengrenzen übrigens auch handhaben.
Wenn ihr statt der Zeichen lieber die Wörter zählen wollt, findet ihr im selben Fach das Script Wörter zählen; eine weitere Variante liegt unter Anzahl der Wörter zählen.
Mitgezählt werden auch Leerzeichen, Ziffern, Satzzeichen und Zeilenumbrüche.
So funktioniert das Script
Das Script ist eines der kürzesten auf dieser Seite und zeigt trotzdem das Grundmuster fast jeder Formular-Programmierung: Es sucht sich zwei Elemente aus der Seite, meldet eine Funktion für ein Ereignis an und schreibt bei jedem Auslösen ein Ergebnis in die Ausgabe. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablennamen keine anderen Scripts der Seite stören.
const feld = document.getElementById("bz-text");
const ausgabe = document.getElementById("bz-ausgabe");document.getElementById() holt ein Element anhand seines id-Attributs aus der Seite. Beide Elemente werden einmal am Anfang herausgesucht und in Variablen gemerkt — das ist schneller und lesbarer, als bei jedem Tastendruck erneut zu suchen. Damit die Elemente zu diesem Zeitpunkt schon existieren, steht das <script> im HTML unter dem Textfeld.
const anzahl = feld.value.length;Das ist die ganze Zählarbeit. value ist bei Eingabefeldern der Text, der gerade darin steht, und length ist die Länge einer Zeichenkette. Es wird also nicht Zeichen für Zeichen durchgegangen, sondern der Browser kennt die Länge ohnehin und gibt sie einfach heraus.
if (anzahl === 1) {
ausgabe.innerHTML = "<strong>1</strong> Zeichen wurde eingegeben";
} else {
ausgabe.innerHTML = "<strong>" + anzahl + "</strong> Zeichen wurden eingegeben";
}Der Satz wird zusammengesetzt und per innerHTML in die Ausgabe geschrieben; die <strong>-Tags heben die Zahl hervor. Der if-Zweig fängt die Einzahl ab, damit nicht „1 Zeichen wurden eingegeben" dasteht — das Original kannte diesen Fall noch nicht. === ist der strikte Vergleich, der Wert und Typ prüft und dem älteren == vorzuziehen ist.
feld.addEventListener("input", zaehlen);
zaehlen();Hier wird die Funktion mit dem Feld verbunden. addEventListener meldet sie für ein Ereignis an — hier für input. Dieses Ereignis löst bei jeder Änderung des Feldinhalts aus, also beim Tippen ebenso wie beim Einfügen mit der Maus, beim Löschen oder beim Diktieren. Das Original benutzte dafür ein onkeyup-Attribut direkt im HTML; das reagiert nur auf losgelassene Tasten und übersieht eingefügten Text. Der abschließende Aufruf zaehlen() sorgt dafür, dass gleich beim Laden schon „0 Zeichen wurden eingegeben" dasteht statt einer leeren Fläche.
Zum Anpassen: Wer eine Obergrenze anzeigen möchte, ersetzt den Ausgabetext etwa durch (160 - anzahl) + " Zeichen frei" und ergänzt am Textfeld ein maxlength="160". Und wenn Emoji als je ein Zeichen gelten sollen, ersetzt ihr feld.value.length durch [...feld.value].length — die drei Punkte zerlegen den Text in einzelne Schriftzeichen statt in Speichereinheiten.
Script für die eigene Homepage
Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.