HTML + CSSEingabefelder
Textfeld mit Limitbalken
Ein Balken unter dem Text füllt sich beim Tippen und wird rot, wenn du dich dem Limit näherst.
Einstellungen
16px
1x
Code
<label class="uv-in2n"><textarea maxlength="80" rows="3" placeholder="Schreib deine Bio"></textarea><div class="ft"><span class="bar"><i></i></span><b class="ct">0/80</b></div></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 hilft überall, wo der Platz knapp ist: die Bio im Profil, der Gruß auf einer Geschenkkarte, eine kurze Bewertung oder der Text einer SMS-Kampagne. Der Balken zeigt auf einen Blick, wie viel noch geht, und das Rot warnt vor dem Anschlag. Eine Textarea mit Zeichenlimit und Fortschrittsbalken in HTML, CSS und etwas JavaScript.
Die Demo erlaubt 80 Zeichen und warnt ab 68. Änderst du das Limit, pass auch den Zähler an und lass der Warnung etwas Spielraum, damit man den Satz in Ruhe zu Ende schreiben kann.