Limiter le nombre de caractère d’un textarea

Voici un petit script pas très compliqué et fort utile lorsque l’on veut limiter à un certain nombre de caractères un textarea. En prime vous bénéficiezd’une réduction de 20% du compteur qui indique au visiteurs le nombre de caractère lui restants

Voyons ça de plus près en commençant par le script javascript:

Script javascript

<script type="text/javascript">
function limite(textarea, max)
{
    if(textarea.value.length >= max)
    {
        textarea.value = textarea.value.substring(0,max);
    }
    var reste = max - textarea.value.length;
    var affichage_reste =  reste +‘ caractères restants’;
    document.getElementById(‘max_desc’).innerHTML = affichage_reste;
}
</script>

Petite explication de texte pour ceux qui suivent pas ou ceux qui galèrent

On vérifie si on a pas déjà depassé le nombre maximum de caractères autorisés en recupérant la longeur de la chaine écrite dans le textarea (par textarea.value.length). Si c’est effectivement le cas, on applique à la valeur du textarea (à savoir le texte tapé dedans) la méthode substring. Elle retourne la sous-chaîne comprise entre les positions 1 et 2 données en paramètre, donc ici comprise entre zéro et le nombre maximum de caractères autorisés. Voilà c’est juste ces lignes là qui servent au textarea.
Le reste sert pour l’affichage des caractères restants, lignes qui sont plutôt simple à comprendre. On calcule le reste, on prépare la variable texte à afficher et pour finir en beauté, on change le contenu de l’élément qui a pour id max_desc.

Il ne reste alors plus qu’à faire votre formulaire sans oublier le span pour afficher le nombre de caractères restants.
Rien de bien méchant :

Script html

<form name="menu1">
  <textarea name="txt" cols="80" rows="5" onkeyup="limite(this,’100′);" onkeydown="limite(this,’100′);"></textarea>
  <span id="max_desc"></span>
</form>

Et voila le tour est joué 

Petit démo :