Kleinschreibung / Großschreibung
Schreibt den Text im Eingabefeld auf Knopfdruck komplett klein oder komplett groß.
Dieses kleine Script schreibt den Text, den ihr in das Feld eingebt, auf Knopfdruck entweder komplett klein oder komplett groß. Es ist eines der ältesten Scripts in unserem Archiv und mit vier Zeilen JavaScript auch eines der kürzesten — gerade deshalb eignet es sich gut als erstes eigenes Beispiel zum Nachbauen.
Die Bedienung ist schnell erklärt: Text eintippen oder hineinkopieren, dann auf „klein schreiben“ oder „GROSS schreiben“ klicken. Der Text im Feld wird dabei direkt ersetzt, ihr könnt ihn also anschließend markieren und weiterverwenden. Ein Klick auf den jeweils anderen Knopf schreibt ihn wieder um.
Praktisch ist das immer dann, wenn Text in der falschen Schreibweise ankommt: eine versehentlich mit gedrückter Feststelltaste getippte Zeile, eine aus einer Mail kopierte Adresse in Versalien oder eine Überschrift, die durchgehend groß werden soll. Ein Hinweis dazu: Aus einer einmal klein geschriebenen Zeile lässt sich die ursprüngliche Groß- und Kleinschreibung nicht wieder herstellen — das Script weiß nicht, welche Wörter Substantive waren. Bei Fließtext lohnt sich also eine Kopie des Originals.
Eine deutsche Besonderheit könnt ihr direkt ausprobieren: Tippt „Straße“ ein und klickt auf „GROSS schreiben“. Heraus kommt „STRASSE“, denn beim Großschreiben wird das ß traditionell zu zwei S. Ein großes ẞ gibt es zwar seit einigen Jahren offiziell, JavaScript verwendet es beim Umwandeln aber nicht.
Wer noch mehr mit Text anstellen möchte: Namen rückwärts gelesen dreht die Buchstabenreihenfolge um, Text auf dem Kopf stellt sie auf den Kopf. Und wenn eine ganze Zeile aus Versehen mit der Feststelltaste geschrieben wurde, hilft das Script Caps-Lock-Text korrigieren weiter.
Der Text im Feld wird direkt umgeschrieben — es gibt keine zusätzliche Ausgabe.
So funktioniert das Script
Das Script besteht nur aus drei Handgriffen: Es merkt sich das Eingabefeld, hängt an jeden der beiden Knöpfe eine Funktion und schreibt darin den Feldinhalt um. Alles zusammen steckt in einer sofort ausgeführten Funktion, damit der Name feld nicht mit anderem Code auf der Seite kollidiert.
const feld = document.getElementById("kg-text");Zuerst wird das Eingabefeld einmal gesucht und in feld abgelegt. getElementById() findet ein Element über seine id — im HTML darüber steht deshalb id="kg-text". Weil das Ergebnis in einer Variablen liegt, muss das Feld nicht bei jedem Klick neu gesucht werden.
document.getElementById("kg-klein").addEventListener("click", function () {
feld.value = feld.value.toLowerCase();
});addEventListener("click", …) verbindet den Knopf mit einer Funktion, die bei jedem Klick ausgeführt wird. Sie hat keinen Namen — man nennt so etwas eine anonyme Funktion, und sie ist üblich, wenn der Code nur an dieser einen Stelle gebraucht wird. Früher schrieb man solche Verbindungen direkt als onclick-Attribut ins HTML; getrennt ist es übersichtlicher, weil Struktur und Verhalten nicht durcheinandergeraten.
feld.value = feld.value.toLowerCase();Das ist die eigentliche Arbeit, und sie ist von rechts nach links zu lesen: feld.value liefert den Text, der gerade im Feld steht. toLowerCase() gibt davon eine komplett klein geschriebene Fassung zurück — die ursprüngliche Zeichenkette bleibt dabei unverändert, denn Texte lassen sich in JavaScript nicht nachträglich ändern. Erst die Zuweisung mit = schreibt das Ergebnis wieder in das Feld zurück. Für den zweiten Knopf funktioniert alles genauso, nur mit toUpperCase().
Wer es genau nimmt, nimmt toLocaleLowerCase() und toLocaleUpperCase(). Diese Varianten beachten die Sprache des Systems, was in ein paar Sprachen wichtig ist — im Türkischen etwa gehört zum kleinen i ein großes İ mit Punkt. Für deutschen Text liefern beide Varianten dasselbe Ergebnis.
Zum Anpassen: Ein dritter Knopf für „Erster Buchstabe groß“ ist schnell ergänzt. Legt im HTML einen Knopf mit einer eigenen id an und hängt daran diese Zeile: feld.value = feld.value.charAt(0).toUpperCase() + feld.value.slice(1).toLowerCase(); — charAt(0) holt den ersten Buchstaben, slice(1) den Rest ab der zweiten Stelle. Übrigens: Wenn Text nur angezeigt groß oder klein erscheinen soll, ohne dass sich der eigentliche Inhalt ändert, braucht es gar kein JavaScript — das erledigt in CSS die Eigenschaft text-transform.
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.