Accueil > > > CONTRÔLE DU NOMBRE DE CARACTÈRES DANS UN CHAMPS TEXTAREA
 CONTRÔLE DU NOMBRE DE CARACTÈRES DANS UN CHAMPS TEXTAREA
 Information sur la source
 Description
Nouvelle version beaucoup plus performante que l'ancienne. La mise en place de la demande de contrôle d'un textarea ne se fait plus du tout de la même manière. /*Compatible avec firefox et IE*/ Avant, il fallait mettre les attibuts onkeypress, etc... directement dans le textarea concerné, mais celà alourdissait le code et ne simplifiait pas les choses en cas de modifs. Maintenant, c'est l'objet document qui est détourné et ensuite, quand nous sommes dans la procédure de contrôle, on vérifie que la cible est bien à contrôler (cf. function verif_textarea_length()). Sinon, on sort directement. Tout se passe dans le <TEXTAREA>: <TEXTAREA id="rappel" rows="4" cols="80" maxlength="200" control_length="1" id_control_cell="counter"></TEXTAREA> En fait, chose que je ne savait il y a 3 ans, c'est que l'on peut mettre des attributs personnalisés sur les éléments HTML. C'est super pratique pour passer des arguments d'appels à une procédure. Ici, je renseigne la l'attribut maxlength qui represente la taille maxi et qui sera traitée dans le script. l'attribut control_length est un booléen qui set a savoir si l'on veux controler ou pas sa taille. Celà peut par exemple être utilise si dans un cas vous voulez inicialement mettre un contrôl de taille sur le champs puis l'enlever en cour de route, il suffira juste de changer la valeur de l'attibut de 1 à 0. L'attribut id_cell_control est la valeur de l'attibut 'id' de la div de control ou va apparaître la taille du texte: <div id="counter" style="display:inline">0</div>/ 200 max. Merci.
 Source
- <head>
- <script type="text/javascript">
-
- //Nicolas LE DREFF 2009
- //Version 2
- //ce code est visible à l'adresse suivante:
- //http://www.javascriptfr.com/code.aspx?ID=38494
-
- // cette fonction est appelée à chaque fois que l'on tape sur une touche (onkeypress,onkeyup), que l'on quite un champ(onblur).
- // l'aiguillage se fait à l'intérieur.
- // A savoir: si l'élément d'éclencheur de l'évenemment a un attibut nomé 'control_length' et qu'il est mis à 1, alors on traite l'évenement,
- // sinon, on passe la main
- function verif_textarea_length(e)
- {
- var target = e.target || e.srcElement; // récupération de la cible
- var is_something_wrong = false; // initialisation variable
-
- if ((target.attributes) && (target.attributes['control_length']) && (target.attributes['control_length'].value = '1')) // 'control_length'?
- {
- max = target.attributes['maxlength'].value; //récupération de la valeur maxlength de la cible
- id_textarea = target.attributes['id'].value; //récupération de la valeur id de la cible
- id_control_cell = target.attributes['id_control_cell'].value; //récupération de la valeur id de la div pour le compteur
-
- textarea = document.getElementById(id_textarea); //assignation du textarea dans un objet plus accessible
- if (textarea.value.length > max) //est-ce que la taille du texte est trop grande?
- {
- //oui, on affiche un message et on découpe ce qui traine après la limite
- alert('Vous ne pouvez rentrer que '+ max +' caractères maximum pour ce champs');
- textarea.value=textarea.value.substring(0,max);
- is_something_wrong = true; // on prévient à la sortie que qque chose ne s'est pas bien passé
- }
- show_counter_value(id_control_cell,textarea.value.length); //on affiche la taille du texte
- }
- return (!is_something_wrong); //retour à l'envoyeur
- }
-
- // affiche le nombre de caractères du textarea
- //rien de bien compliqué
- function show_counter_value(id_control_cell,counter_value)
- {
- control_cell_div = document.getElementById(id_control_cell);
- control_cell_div.innerHTML = counter_value ; // on met à jour le champs de contrôle.
- return true;
- }
-
- //mise en place des gachettes (triggers en anglais)
- function set_callback_events()
- {
- if (document.addEventListener){
- // alert('FF');
- document.addEventListener('keypress', verif_textarea_length, false);
- document.addEventListener('keyup', verif_textarea_length, false);
- document.addEventListener('blur', verif_textarea_length, false);
- } else if (document.attachEvent){
- // alert('IE');
- document.attachEvent('onkeypress', verif_textarea_length);
- document.attachEvent('onkeyup', verif_textarea_length);
- document.attachEvent('onblur', verif_textarea_length);
- }
- }
-
- </script>
-
- </head>
- <body onload="set_callback_events()">
- <form name="text" method="POST" action="">
- <span class="BlancLarge">Début de votre texte : </span><br>
- <TEXTAREA id="rappel" rows="4" cols="80" maxlength="200" control_length="1" id_control_cell="counter"></TEXTAREA><br>
- <span class="VertSmall">Nombre de caractères de ce champs : <div id="counter" style="display:inline">0</div>/ 200 max.</span><br><br>
- <input type="hidden" name="mode" value="submit"><br>
- <span class="BlancMedium">Pour valider et enregistrer votre texte : </span><input type="submit" value="Cliquez ici">
- </form>
- </body>
<head>
<script type="text/javascript">
//Nicolas LE DREFF 2009
//Version 2
//ce code est visible à l'adresse suivante:
//http://www.javascriptfr.com/code.aspx?ID=38494
// cette fonction est appelée à chaque fois que l'on tape sur une touche (onkeypress,onkeyup), que l'on quite un champ(onblur).
// l'aiguillage se fait à l'intérieur.
// A savoir: si l'élément d'éclencheur de l'évenemment a un attibut nomé 'control_length' et qu'il est mis à 1, alors on traite l'évenement,
// sinon, on passe la main
function verif_textarea_length(e)
{
var target = e.target || e.srcElement; // récupération de la cible
var is_something_wrong = false; // initialisation variable
if ((target.attributes) && (target.attributes['control_length']) && (target.attributes['control_length'].value = '1')) // 'control_length'?
{
max = target.attributes['maxlength'].value; //récupération de la valeur maxlength de la cible
id_textarea = target.attributes['id'].value; //récupération de la valeur id de la cible
id_control_cell = target.attributes['id_control_cell'].value; //récupération de la valeur id de la div pour le compteur
textarea = document.getElementById(id_textarea); //assignation du textarea dans un objet plus accessible
if (textarea.value.length > max) //est-ce que la taille du texte est trop grande?
{
//oui, on affiche un message et on découpe ce qui traine après la limite
alert('Vous ne pouvez rentrer que '+ max +' caractères maximum pour ce champs');
textarea.value=textarea.value.substring(0,max);
is_something_wrong = true; // on prévient à la sortie que qque chose ne s'est pas bien passé
}
show_counter_value(id_control_cell,textarea.value.length); //on affiche la taille du texte
}
return (!is_something_wrong); //retour à l'envoyeur
}
// affiche le nombre de caractères du textarea
//rien de bien compliqué
function show_counter_value(id_control_cell,counter_value)
{
control_cell_div = document.getElementById(id_control_cell);
control_cell_div.innerHTML = counter_value ; // on met à jour le champs de contrôle.
return true;
}
//mise en place des gachettes (triggers en anglais)
function set_callback_events()
{
if (document.addEventListener){
// alert('FF');
document.addEventListener('keypress', verif_textarea_length, false);
document.addEventListener('keyup', verif_textarea_length, false);
document.addEventListener('blur', verif_textarea_length, false);
} else if (document.attachEvent){
// alert('IE');
document.attachEvent('onkeypress', verif_textarea_length);
document.attachEvent('onkeyup', verif_textarea_length);
document.attachEvent('onblur', verif_textarea_length);
}
}
</script>
</head>
<body onload="set_callback_events()">
<form name="text" method="POST" action="">
<span class="BlancLarge">Début de votre texte : </span><br>
<TEXTAREA id="rappel" rows="4" cols="80" maxlength="200" control_length="1" id_control_cell="counter"></TEXTAREA><br>
<span class="VertSmall">Nombre de caractères de ce champs : <div id="counter" style="display:inline">0</div>/ 200 max.</span><br><br>
<input type="hidden" name="mode" value="submit"><br>
<span class="BlancMedium">Pour valider et enregistrer votre texte : </span><input type="submit" value="Cliquez ici">
</form>
</body>
 Conclusion
Je pense qu'avec cette nouvelle version, je rends plus ouvert l'intégration du script dans d'autres application.
J'ai aussi trouvé d'autre solution sur le net, mais j'aime bien la mienne :D
 Historique
- 09 juillet 2006 01:51:50 :
- Changement de la capture d'écran
- 09 juillet 2006 02:02:16 :
- J'avais oublié un double-quote pour un commentaire
- 24 janvier 2009 18:52:45 :
- Changement radical de façon d'apréhender les choses.
Epuration du code et simplification de la mise en place de la demande de contrôle
Support FF et IE
- 24 janvier 2009 18:56:52 :
- Mise à jour de la capture
 Sources du même auteur
 Sources de la même categorie
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
Récupérer la position du curseur dans un TEXTAREA [ par piment ]
Comment récupérer la position du curseur dans un textarea ou la position en nombre de caractère depuis le début.Merci
test [ par alcatraz ]
Bonjour a tous,petite question au sujet du javascript.J'ai un formulaire de saisie de données avec plusieurs champs du type textarea.Je voudrais teste
URGENT: position du curseur dans un TEXTAREA ??? [ par Kiom ]
Bonjour tout le monde,bon voilà une petite question :est-il possible en javascript de connaître la position du curseur dans un textarea ?....une répon
Compter le nombre de caractère [ par Titrax ]
Salut quelqu'un aurait la méthode pour compter le nombre de caractère (en temps reel) que l'on met dans un textarea. MErci d'avance.
Ecrire l'heure dans une textarea [ par c0nquer ]
::.. SqualL Pow4 ..:: www.SqualLv3x.fr.st <- My siteBonjour a tous , je voudrais savoir si il est possible de mettre l'heure en temps réel dans une
comment écrire dans un textarea ?? [ par moudj ]
Bonjour,je ne sais pas si c'est possible mais voilà ce que je veux faire.pendant qu'on saisi un texte dans un textarea, on veut, à un moement donné, à
Textarea = WYSIWYG éditeur HTML [ par Blasteur ]
Bonjour à tous !Je recherche un javascript qui soit intégrable dans un formulaire de la même manière qu'une textarea. Ce script est en fait un éditeur
textarea = WYSIWYG éditeur HTML [ par Blasteur ]
Bonjour à tous !Je recherche un javascript qui soit intégrable dans un formulaire de la même manière qu'une textarea. Ce script est en fait un éditeur
Bloquer un textarea [ par hicksman ]
Salut!je voudrais bloquer ( en disabled ou readonly) un textarea en cliquant sur un bouton radio. sans recharger la page.Quelle est la méthode à utili
Insérer un fichier dans un textarea [ par CyberB ]
Bonjour,J'ai chercher et rechercher partout et je n'ai pas trouvé null part une façon d'afficher dans mon texarea le contenu d'un fichier .txtEst-ce q
|
Derniers Blogs
 SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko
Logiciels
 Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|