0/5 (17 avis)
Vue 38 528 fois - Téléchargée 820 fois
<html> <head> <title>Limiter un textarea</title> <style type="text/css"> /* Style pour le textarea */ textarea.limiter { width: 610px; font-size: 10px; font-family: Verdana, sans-serif; } /* style pour le case de décompte de caractères possible à saisir */ div.decompte { width: 30px; position: absolute; border: 1px solid #FF0000; font-size: 10px; font-family: Verdana, sans-serif; } </style> <script language="Javascript" type="text/javascript"> // args : string moncontroletexte, int nbcar, string moncontroledecompte // return : aucun // Affecte à certains évènements d'un textarea, le contrôle de la longueur de son contenu function LimiterTextArea(nom_controletexte, nbcar, nom_controledecompte) { var moncontroletexte = document.getElementById(nom_controletexte); var moncontroledecompte = document.getElementById(nom_controledecompte); if (moncontroletexte && moncontroledecompte) { moncontroletexte.onclick = function(){TextAreaEstRempli(moncontroletexte, nbcar, moncontroledecompte)}; moncontroletexte.onblur = function(){TextAreaEstRempli(moncontroletexte, nbcar, moncontroledecompte)}; moncontroletexte.onkeyup = function(){TextAreaEstRempli(moncontroletexte, nbcar, moncontroledecompte)}; moncontroletexte.onkeypress = function(){TextAreaEstRempli(moncontroletexte, nbcar, moncontroledecompte)}; // *** Affichage du nombre de caractères restant if(moncontroledecompte.type) moncontroledecompte.value = NbCarRestant(moncontroletexte, nbcar); // Pour un input de formulaire else moncontroledecompte.innerHTML = NbCarRestant(moncontroletexte, nbcar); // Pour un élément HTML } } // TextAreaEstRempli // args : textarea moncontroletexte, int nbcar, element_HTML moncontroledecompte // return : bool // Renvoie vrai si le nombre de caractères maximum du textarea n'est pas atteint function TextAreaEstRempli(moncontroletexte, nbcar, moncontroledecompte) { if (moncontroletexte) { if (moncontroletexte.value.length <= nbcar) { //alert("pas rempli"); // mes actions ... // *** Affichage du nombre de caractères restant if(moncontroledecompte.type) moncontroledecompte.value = NbCarRestant(moncontroletexte, nbcar); else moncontroledecompte.innerHTML = NbCarRestant(moncontroletexte, nbcar); return true; } else { //alert("rempli"); // mes actions ... // Affichage du nombre de caractères restant moncontroletexte.value = moncontroletexte.value.substr(0, nbcar); // *** Affichage du nombre de caractères restant if(moncontroledecompte.type) moncontroledecompte.value = NbCarRestant(moncontroletexte, nbcar); else moncontroledecompte.innerHTML = NbCarRestant(moncontroletexte, nbcar); return false; } } } // NbCarRestant // args : textarea moncontroletexte, int nbcar // return : int // Renvoie le nombre de caractère à saisir function NbCarRestant(moncontroletexte, nbcar) { if (moncontroletexte.value.length) return new Number(nbcar - moncontroletexte.value.length); else return new Number(nbcar); } </script> </head> <body> <form name="frmPage" action="Limiter.htm" method="POST"> <textarea id="commentaire" name="commentaire" class="limiter"></textarea> <!-- Avec un INPUT de formulaire --> <!--<input type="text" id="controle_decompte" name="controle_decompte" value="">--> <!-- Ou avec un DIV --> <div id="controle_decompte" name="controle_decompte" class="decompte"></div> <script language="Javascript" type="text/javascript"> LimiterTextArea('commentaire', 10, 'controle_decompte'); </script> <input type="reset" id="annuler" name="annuler" value="Annuler" /> </form> </body> </html>
20 mai 2010 à 12:14
27 mai 2009 à 17:24
12 août 2007 à 09:54
5 juil. 2006 à 08:38
juste que pour 2 textarea, ça fonctionnait pas avec
LimiterTextArea(document.frmPage.commentaire2, 255, div_decompte2);
mais avec
LimiterTextArea(commentaire2, 255, div_decompte2);
merci pour ce code utile et intelligent !
24 mai 2006 à 12:10
- Le nombre de caractères max est DANS la fonction. Donc si on veut fixer plusieurs limites il faut dupliquer la fonction pour chacune d'entre elles.
- La référence aux évènements est inscrit dans chaque textarea, alors si on a 10 textareas, il faut enchainer les copier-coller pour chacun, en faisant gaffe au reste du dév qui pourrait s'appuyer sur ces mêmes évènements (contrôle de saisie...)
- les évènements OnKeyUp et OnKeyPress ne couvrent pas tous les moyens de mettre du texte dans un textarea (et donc d'en fixer les limites !) tel que le drag&drop avec la souris.
Donc, ton exemple est plus simple à comprendre, mais à l'usage plus lourd à maintenir.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.