le MEMO du WEB développeur
••• HTML •••  Liste des Mémos, astuces et bonnes pratiques

Limiter le nombre de caractères saisis dans un textarea

Dans un input de type "text", il est facile de limiter le nombre de caractères maximum que peut saisir l'utilisateur grâce à l'attribut "maxlength"

Exemple :

<input type="text" name="montext" value="écrivez votre texte en 50 caractères" maxlength="50" />

Il n'est par contre bizarrement pas possible d'utiliser cet attribut dans un input de type "textearea", il convient alors de faire appel à une bidouille javascript si l'on souhaite empêcher l'utilisateur d'écrire tout un roman. Une fonction javascript sue l'événement "keyup" du  textarea va vérifier le nombre de caractères saisis et tronquer la chaîne lorsque le nombre max (passé en paramètre de la fonction) est atteint  :

code javascript :

Fonction Javascript pour limiter la saisie de caractères dans un textarea

<script type="text/javascript">
 function MaxLengthTextarea(objettextarea,maxlength){
  if (objettextarea.value.length > maxlength) {
    objettextarea.value = objettextarea.value.substring(0, maxlength);
    alert('Votre texte ne doit pas dépasser '+maxlength+' caractères!');
   }
}
</script>

code HTML :

<textarea cols="20" rows="2" name="montextarea" onkeyup="javascript:MaxLengthTextarea(this, 150);">                
  écrivez votre texte en 150 caractères maximum
</textarea>

 

publié le 19/12/2011 par Memo Web
Formulaires
Commentaire :
Oui je suis d'accord avec ce que vous avez mis, mais par exemple,
Si la personne doit rentrer plusieurs numéros qui soit composé de 9 chiffre et qui soit séparer par un espace. Et qu'il faut qu'on sache que si la taille est = 9 alors c'est un bon numéro et si il est inférieur ou supérieur à 9 alors ce n'est pas bon ?
par inconnu, le 18/11/2014
Bonjour, j'ai une question de ce même genre en peut etre un peut plus complexe.
J'ai donc un textarea comme vous ou l'utilisateur peut saisir plusieurs numéro de dossier dedans (NDA) qui doivent être composé de 9 chiffre (ou caractères).
Sachant que la personne peut en saisir plusieurs en les séparant par un espace ou un retour a la ligne comment je peut calculer les chaines qui rentrent si elles sont égale à 9 et si elles n'y sont pas alors ce ne sont pas des NDA ?

Merci, Cordialement Cahuet
par inconnu, le 18/11/2014
Hello à tous faites attention dans la première partie du tuto : maxlentgh="50" s'écrit maxlength="50"
par inconnu, le 28/03/2013
Corrigé. Merci !
par tarabusk, le 28/03/2013
Commenter le Mémo :

Ma méthode pour affecter un identifiant entier à mes éléments HTML
Empêcher l'autocomplétion dans les formulaires
Comment ajouter un favicon sur son site
Internet Explorer : Commentaire conditionnel
Rafraîchir automatiquement une page
Revenir à la page précédente du navigateur
Comment ne pas interpréter une commande HTML à l'affichage
Trouver le chemin canonique absolu d'un répertoire
Padding et margin en hauteur ne fonctionnement pas sur éléments inline
Problème de slash sur passage de paramètres dans formulaire
Ajoutez vos propres Mémos sur MEMO-WEB

Il suffit de vous créer un compte sur le site

Vous pourrez choisir un thème parmis l'une des catégories proposées par MEMO-WEB.

Rédigez votre Mémo.
Après validation par MEMO-WEB, il sera mis en ligne.
Ajouter vos Mémos