Aujourd’hui on va voir un truc très simple 🙂

Nous allons compter le nombre de caractères dans un textarea.

Cela peut être utile lorsque l’on souhaite limiter la possibilité à l’utilisateur d’être des romans XD

// on prépare notre élément
<textarea onKeyup="comptCaractere()" name="caractJS" id="caractJS"></textarea>

// la balise qui va récupérer les caractères
<div id="compteurJS">0</div>

function comptCaractere(){
	return document.getElementById('compteurJS').innerHTML = document.getElementById('caractJS').value.length;
}

Fonctionnement

L’évènement onKeyup va activer la fonction comptCaractere à chaque fois que l’on relâche une touche du clavier.

La fonction récupère la valeur du textarea : document.getElementById(‘caractJS’).value

Et on compte le nombre de caractères grâce à : .length

Et maintenant, on va voir comment faire le compteur de Twitter

<textarea onKeyup="comptTCaractere(this, 140)" name="caracTtJS" id="caracTtJS"></textarea>

<div id="compteurTJS">140</div>

THIS ? WTF ?

Grâce à this, on précise dans notre fonction, que c’est l’élément en cours. Comme cela, il est plus facile de l’utiliser dans la fonction.
Le nombre 140 : c’est le nombre maximum de caractères que l’on souhaite.

function comptTCaractere(obj, nb){
   nb = (typeof nb === 'undefined') ? 100 : nb;
   obj.value =  obj.value.substr(0, nb);
   document.getElementById('compteurTJS').innerHTML = nb-obj.value.length;
}

Ici, la fonction à 2 arguments : l’élément en question, et le nombre maximum de caractères (avec une valeur par défaut).
substr va nous permettre de récupérer le nombre de caractères que l’on souhaite : de 0 au maximum voulu (soit ici du 1er au 140e caractères).
Et on termine, par mettre à jour le compteur en faisant une soustraction. (nombre max – nombre de caractère de l’élément)