begin process at 2010 02 10 03:48:42
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > 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

Note :
10 / 10 - par 1 personne
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Classé sous :textarea, maxlength, onkey, onchange, caractère Niveau :Initié Date de création :09/07/2006 Date de mise à jour :24/01/2009 18:56:52 Vu :18 535
Auteur : masternico

Ecrire un message privé
Commentaire sur cette source (13)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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 de la même categorie

Source avec Zip Source avec une capture CALCULS RAYNAUX V2 par Ali Bibi
Source avec Zip Source avec une capture VALIDATION D'UN FORMULAIRE par grarestephane
Source avec Zip Source avec une capture CHAT VIRTUEL par grarestephane
Source avec Zip Source avec une capture AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane
Source avec Zip TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture CODE UTF-8 par amrounix
Source avec Zip TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet
Source avec Zip Source avec une capture WYSIWYG TOTALEMENT OO par coucou747
Source avec Zip Source avec une capture CURSEUR DANS TEXTAREA par PetoleTeam
Source avec Zip BBCODE! par DomJ

Commentaires et avis

Commentaire de pagis78 le 16/07/2006 17:56:20

Code bcp trop spécifique à ton portail.

Commentaire de masternico le 17/08/2006 23:32:49

Il me semblait au contraire que cela permettait une intégration dans n'importe quel code. Me serais-je trompé?
C'est possible.

Commentaire de dda45 le 20/11/2006 17:43:02

J'ai fais un script sensblement pareil (sauf que j'utilise la méthode blur()) mais il reste un problème que ce script a aussi, lorsque que l'on arrive à 200 caractères ... Plus moyen d'en supprimer un !!! Comment faire ???

Commentaire de masternico le 15/12/2006 12:31:24

Salut, excusez moi de ne pas avoir répondu plus tôt. Je suis plus sur php et j'avais oublié que j'avais posté un source ici.

>>lorsque que l'on arrive à 200 caractères ... Plus moyen d'en supprimer un !!! Comment faire ???

Je n'ai pas ce problème là. Quand j'arrive au nombre de caractères maxi, la frappe est annulée, mais l'effacement reste possible.  C'est bizare. As tu testé mon script?

Commentaire de Neustradamus le 16/02/2007 10:42:18

J'ai même problème, blocage à 200 ou 800 : normal, mais suppression après impossible.

Commentaire de djoudjouly le 24/01/2009 13:25:41

Bonjour,
Je trouve que l'idée de ton formulaire est très sympa et très pratique. Mais après vérification dans Firefox et IE, il ne fonctionne pas du tout. Aucun décompte de caractères et aucune limite non plus... Aurais-tu fais une mise à jour du codage ?? Pourrais-tu nous la poster. Merci d'avance...

Commentaire de masternico le 24/01/2009 19:03:38

Merci à toi pour ce commentaire qui m'a rappelé (encore une fois) que j'avais mis ce script ici.

J'en ai donc profité pour tout remettre à jour et aussi pour intégrer la comptaibilité avec FF.

Voici donc un script légé et portable, facilement intégrable à vos applis

A pluche

Commentaire de djoudjouly le 24/01/2009 19:18:43

Merci beaucoup cela fonctionne très bien maintenant.
Je ne voudrais pas t'ennuyer, mais comment puis-je faire pour que avec une case à cocher par exemple, je peux passer en mode "caractère illimité". C'est une option que j'aimerai avoir... Si c'est trop complexe ne te prends pas la tête c'est déjà super comme ça!
Encore merci à toi...

Commentaire de djoudjouly le 24/01/2009 19:24:03

Ou d'avoir un deuxième champ comme tu avais la première fois...
;-)

Merkiii

Commentaire de masternico le 25/01/2009 00:33:44

Je te remercie de l'intérêt que tu porte à mon code.
Pour l'instant, je vais le laisser comme ça car je cours un peut après le temps au niveau taf.
J'y reviendrais plus tard pour intégrer ta demande.

Si tu veux y aller de ta propre patte, voici quelques indice qui pourront d'aider:
mettre en place un checkbox avec un évènement sur le 'onchange'
<input type="checkbox" onchange="set_textarea_control_on_off(this)" id_textarea="rappel" checked>

et dans la function il faut récuperer la valeur de l'attribut 'id_textarea' pour savoir de quel textarea on parle ainsi la valeur du checkbox  (this.___) et en fonction de sa valeur positionner l'attribut 'control_length' du textarea soit à 1 soit à 0

Bon courage

Commentaire de djoudjouly le 25/01/2009 09:04:20

Merci beaucoup pour ces infos précieuses. Je vais me jeter dans l'arène et espère mener mon combat à bien... ;-) Tu en seras le premier informé... Encore merci à toi!

Bon taf...

Commentaire de masternico le 25/01/2009 14:22:53

Merci, je dois avoir fini un site de vente en ligne avant la fin de la semaine prochaine... c'est chaud...

Bon taf à toi aussi...

PS: une petite note?   ;)

Commentaire de djoudjouly le 25/01/2009 16:58:15 10/10

Et voilà!!!! ;-)

Je suis graphiste designer, je débute dans le développement pour me mettre à la page, et c'est chaud. Mais je vais m'accrocher...

Si tu as besoin n'hésite pas...
A plus!

 Ajouter un commentaire


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 &lt;- 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


Nos sponsors


Sondage...

CalendriCode

Février 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,671 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)