Voici un snippet simple pour afficher en temps réel le nombre de caractères saisis dans un champ texte ou une zone de texte.


Pourquoi utiliser un compteur de caractères


Un compteur de caractères permet à l’utilisateur de voir combien de texte il a déjà écrit.


C’est super utile pour :

  • une bio de profil
  • un commentaire
  • une description
  • un message
  • un champ limité en longueur


C’est le petit détail discret qui évite le fameux moment où tu rédiges ton chef-d’œuvre… puis le formulaire te regarde froidement avec un “250 caractères maximum”.


Le code HTML 


<label for="message">Votre message</label>

<textarea id="message" maxlength="200" placeholder="Écris quelque chose..."></textarea> 


<p id="charCount">0 / 200 caractères</p>


Le code CSS 


textarea {

  width: 100%;

  min-height: 120px;

  padding: 12px;

  resize: vertical;

} 


<a href="/search.php?q=charcount" class="hashtag">#charCount</a> {

  margin-top: 8px;

  font-size: 14px;

}


Le code JavaScript 


const message = document.getElementById("message");

const charCount = document.getElementById("charCount");

const maxLength = message.getAttribute("maxlength"); 


message.addEventListener("input", function () {

  const currentLength = message.value.length;

  charCount.textContent = ${currentLength} / ${maxLength} caractères;

});


Comment ça fonctionne


Le script surveille ce que l’utilisateur tape dans le champ.


À chaque nouvelle saisie :

  • il compte le nombre de caractères
  • il récupère la limite maximale
  • il met à jour le texte affiché en dessous


Résultat : le compteur évolue en temps réel, sans recharger la page.


Où utiliser ce snippet


Tu peux l’utiliser sur :

  • un formulaire de contact
  • une zone de commentaire
  • une description de produit
  • une bio utilisateur
  • une publication sur un site ou une app


Bref, partout où il faut écrire sans dépasser une limite.


Le compteur de caractères est un snippet simple mais très utile pour améliorer l’expérience utilisateur. Il donne un retour immédiat, évite les dépassements et rend les formulaires plus propres et plus modernes.


#snippet #javascript #html #css #textarea #formulaire #webdev