Character Counter
Zone de texte à hauteur fixe avec un compteur « n / 150 » logé dans son coin bas droit, ambre à 80 % de la limite, rouge quand elle est atteinte.
Mis à jour le
Cet effet fait partie d'Effect.Labs — 840 effets vanilla, une partie gratuite, une partie premium. Formulaires comprend 20 effets, dont 2 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Le compteur est un <span> placé en absolu dans le coin bas droit du bloc, au-dessus de la marge intérieure basse de la zone (30 px réservés). À chaque événement input, le script écrit « longueur / maximum », le maximum venant de l'attribut maxlength (150 livré) ; changer cet attribut suffit pour un SMS à 160 ou une question à 45.
À 80 % du maximum (120 sur 150), le compteur prend la classe is-warning, ambre ; à la limite, is-limit, rouge. La zone garde sa hauteur (100 px minimum) : l'utilisateur peut l'agrandir verticalement avec la poignée (resize: vertical), sinon le texte défile.
La balise <textarea> est vide dans le HTML livré : le placeholder s'affiche et le compteur part de 0 (gardez les deux balises collées si vous la retouchez). Aucun identifiant fixe : deux zones dans la même page se comptent séparément, et le champ porte un name envoyé avec le formulaire.
Accessibilité
- Étiquette : « Message » dans un
<label>masqué visuellement, à renommer selon l'usage. - Compteur relié :
aria-describedbypointe vers le compteur, lu en arrivant dans la zone. - Annonces mesurées : une zone
aria-live="polite"parle au passage dans l'ambre (« Plus que 30 caractères ») puis à la limite, jamais à chaque touche. - Mouvement : aucune animation hormis le changement de couleur de la bordure au focus.
- Limite : si le texte dépasse la hauteur visible, ses dernières lignes peuvent passer sous le compteur. Prévoyez une hauteur (
--chct-min-height) qui contient la limite entière.
Compatibilité navigateur
1,8 Ko de JavaScript, CSS à variables. Mesuré le 08/11/2026 dans Chromium, Firefox et WebKit (Playwright) : valeur de départ vide, placeholder affiché, « 1 / 150 » après une touche, 150 / 150 en rouge après un collage trop long, deux copies indépendantes, toucher à 390 px, aucune erreur. Seuil fixé par NodeList.forEach (Chrome 51, Firefox 50, Safari 10, d'après @mdn/browser-compat-data).
Sans JavaScript, le compteur reste sur « 0 / 150 » mais le navigateur applique toujours maxlength.
Le code
Structure HTML à coller dans votre page (le CSS + JS sont inclus avec votre achat) :
<div class="fx-0299-root">
<div class="chct-group">
<label class="chct-field">
<span class="chct-sr">Message</span>
<textarea class="chct-input" name="message" placeholder="Tapez votre message..." maxlength="150"></textarea>
</label>
<span class="chct-count">0 / 150</span>
<span class="chct-sr chct-status" aria-live="polite"></span>
<span class="chct-words" hidden>
<span data-msg="warning">Plus que {n} caractères</span>
<span data-msg="limit">Limite de {max} caractères atteinte</span>
</span>
</div>
</div>Paiement unique, sans abonnement — le code est à toi pour toujours
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
Limite (HTML — maxlength sur la zone) |
150 | Le texte du compteur et les seuils suivent ; mettez aussi la bonne valeur dans le texte initial de .chct-count pour l'affichage sans JavaScript. |
Seuil ambre (JS — max * 0.8) |
80 % | 0.9 pour ne prévenir que dans les derniers 10 %. |
Couleurs du compteur (CSS — --chct-muted, --chct-warning, --chct-limit sur .fx-0299-root) |
#a1a1aa · #f59e0b · #ef4444 | Sur fond clair : #6b7280, #b45309, #dc2626. |
Hauteur (CSS — --chct-min-height) |
100px | Choisissez une hauteur qui contient la limite entière, pour que le texte ne glisse pas sous le compteur. |
Champ (CSS — --chct-field, --chct-border, --chct-focus, --chct-text) |
transparent · indigo à 30 % · #6366f1 · #fff | Fond, bordure au repos et au focus, couleur du texte. |
Largeur et cadre (CSS — --chct-width, --chct-bg, --chct-root-min-height) |
280px · #0a0a0f · 300px | Dans une page : --chct-width:100%; --chct-bg:transparent; --chct-root-min-height:0. |
Messages annoncés (HTML — .chct-words) |
« Plus que {n} caractères » · « Limite de {max} caractères atteinte » | {n} = caractères restants, {max} = limite. |
FAQ
reset du formulaire, oui, automatiquement. Après une valeur posée par script, déclenchez textarea.dispatchEvent(new Event('input', {bubbles: true})) : c'est ce que fait le bouton de modèle dans l'exemple du support.value.length, comme maxlength : un émoji courant compte pour 2, certains pour davantage. Compteur et limite restent donc d'accord entre eux, mais pas forcément avec le décompte d'un opérateur SMS.
