Textfeld mit Zeichenzähler
Ein Textfeld mit Balken, der sich beim Tippen füllt und kurz vor dem Limit erst orange, dann rot wird.
Einstellungen
Code
<label class="uv-ic"><textarea maxlength="60" placeholder="Erzähl uns etwas"></textarea><span><i></i><b>0/60</b></span></label>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Wofür du ihn nutzen kannst
Ein Zeichenzähler zeigt, wie viel Platz noch bleibt, bevor man an die Grenze stößt. Er passt zur Bio auf einer Profilseite, zum Titel einer Produktbewertung, zur Nachricht ans Restaurant bei einer Reservierung oder zu einer SMS-Erinnerung in einer Praxis-App. Der Balken füllt sich beim Tippen, wird bei 80 % orange und am Limit rot.
Die Demo endet bei 60 Zeichen; das Limit änderst du im HTML. Dafür sorgen ein paar Zeilen JavaScript. Zeig den Zähler nur dort, wo es wirklich eine Grenze gibt. Bei einem normalen Kommentarfeld ist ein Balken, den nie jemand füllt, nur zusätzliches Rauschen.