[JavaScript] Compteur de caractères

Ce petit tuto a pour but de vous donner un exemple simple pour ajouter un compteur de caractères à une zone de texte en JavaScript.

Exemple de résultat

Entrez du texte dans la zone de texte et observez le compteur en bas à droite :

Mise en place du compteur

Ajoutez un attribut id à votre zone de texte et donnez-lui une valeur (dans ce cas "zoneTexte") :

<textarea id="zoneTexte"></textarea>

Insérez une balise div au-dessous de votre textarea avec un attribut id "compteur" (et par exemple un alignement du texte à droite) :

<div id="compteur" style="text-align:right">0</div>

Pour terminer, insérez le code JavaScript suivant dans votre page :

<script>
    document.getElementById('zoneTexte').addEventListener('keyup', function() {
        document.getElementById('compteur').innerHTML = zoneTexte.value.length;
    });
</script>

Ce code va ajouter un événement qui va actualiser le compteur à chaque modification du contenu de la zone de texte.