Magazine Internet

Limiter le nombre de caractère d’un textarea

Publié le 19 décembre 2007 par Tonylepsie

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 :



Retour à La Une de Logo Paperblog

LES COMMENTAIRES (3)

Par vidda
posté le 21 août à 12:20
Signaler un abus

Voilà un script bref et efficace!!

Par jza
posté le 27 octobre à 17:07
Signaler un abus

Merci pour ce script efficace et léger ! J'ai juste remplacé les "`" par des "'" et supprimé les "'" dans les appels de la fonction "limit". Let's rock man !

Par Tchup
posté le 09 mai à 16:41
Signaler un abus

Merci pour ce p'tit bout de code simple et efficace... ;)

A propos de l’auteur


Tonylepsie 3 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte