Web component compteur de caractères

Cette page est une démonstration de la nouvelle version de mon script compteur de caractères.

Utilisation

Les paramètres de ce script sont à mettre dans les attributs HTML suivants :

maxlength : nombre de caractères maximum
data-threshold : valeur à partir de laquelle alerter
data-normal : couleur du texte normale
data-alert : couleur du texte quand la valeur seuil est atteinte
data-reached : couleur du texte quand le champ est plein

Le script en action

Comme indiqué dans l'article présentant la création de ce script, le script est utilisable de deux manières : soit par lancement de la fonction d'initialisation sur les champs, ou par web component. Cette page présente des champs créés de ces deux manières.

Champ web component : <input maxlength="64" is="charcount-input" data-normal="lime" />

Champ avec classe : <input maxlength="64" class="charcount" data-threshold="48" />

Retrouvez sur mon blog mes différents tutoriels, ainsi que toutes mes autres démos.