compteur de caractère pour 5 textaera [Résolu]

anca2 · 28/06/2009, 20h45

Bonjour,

J'ai un compteur qui marche trés bien pour un textaera mais impssible de le faire fonctionner mêmepas pour 2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!--
 
var max=300;
 
 
function compter(f) {
	var txt=f.Formation.value;
	var nb=txt.length;
	if (nb>max) {
                 nb=nb-1;
		alert("Pas plus de "+max+" caractères dans ce champ");
 
		f.Formation.value=txt.substring(0,max);
 
	}
 f.nbcar.value=max-nb;
}
 
function timer() {
	compter(document.forms["Form"]);
	setTimeout("timer()",100);
 
}
//-->

le html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
 
<p align="left">Message&nbsp; de 300 caract&egrave;res maxi. Sur 10 lignes. Il reste <input type="text" class="formulaire" name="nbcar" size=3/>&nbsp;
caract&egrave;res.<br />
&nbsp;&nbsp; 
<textarea rows="7" class="formulaire" name="message" cols="52"  onkeydowm="compter(this.form)" ></textarea>
</p>

Auriez vous une idée ou un script qui puisse compter les caractères sur plusieurs textaera.

Merci pour vos réponses.

SpaceFrog · 29/06/2009, 09h09

oui les timers s'embrouillent...
il faudrait faire une nouvelles instance de fonction timer pour chaque textarea ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function timer() {
       tabText=document.forms["Form"].getElementsByTagName('textarea');
       tabTimer=new Array(); 
        i=0;
        while(tabText[i]){
         new compter(tabText[i]);
	 tabTimer[i]=setTimeout("timer()",100);
         i++;
         }
 
}

RomainVALERI · 29/06/2009, 09h36

Ce n'est probablement pas la cause de ton problème mais il y a une petite faute de frappe ici :

Citation:

Envoyé par anca2

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<textarea rows="7" class="formulaire" name="message" cols="52"  onkeydowm="compter(this.form)" ></textarea>

anca2 · 29/06/2009, 20h36

Bonsoir SpaceFrog , Romain,

merci pour vos réponses

En effet SpaceFrog, les timer s'en mêlent ton script fonctionne mais la mise en place est lourde pour la fonction comptage il faut faire une fonction pour chaque textaera .
J'ai trouver par hasard un script qui fonctionne et dont la mise en place est simple.
J'ai ajouté un "limitateur" de ligne (je ne sais plus où je l'ai trouvé, désolé).

Ci-dessous le code complet, la mise en place pour plusieurs textaera et facile.
Il manque l'affichage du nombre de lignes restant, si vous avez une idée comment faire merci de faire partager le savoir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
 
<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 compter_ligne( event, zoneSaisie, ligMax )
   {  if ( event.keyCode==13 || event.which==13 )
      {
	  if (navigator.appName=="Netscape")
  {var nl="\n"; }
else if (navigator.appName=="Microsoft Internet Explorer")
 {var nl="\r";}
 
         if ( zoneSaisie.value.split(nl).length>=ligMax )
         {  event.returnValue=false;
            return false;
         }
      }
      return true;
   }
 
 
 
 
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="Form" action="Limiter.htm" method="POST">
	  <textarea id="commentaire" onKeyDown="return(compter_ligne( event, this, 10))" name="commentaire" class="limiter"></textarea> <br>
 
		<!-- 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', 30, 'controle_decompte'); 
		</script> 
 
		<br/><textarea id="commentaire_2"  onKeyDown="return(compter_ligne( event, this, 12))" name="commentaire_2" class="limiter"></textarea><br> 
 
		<!-- Avec un INPUT de formulaire -->
		<!--<input type="text" id="controle_decompte" name="controle_decompte" value="">-->
		<!-- Ou avec un DIV -->
		<div id="controle_decompte_2" name="controle_decompte_2" class="decompte"></div>
 
		<script language="Javascript" type="text/javascript"> 
			LimiterTextArea('commentaire_2', 40, 'controle_decompte_2'); 
		</script> 
 
 
 
 
		<br><br><input type="reset" id="annuler" name="annuler" value="Annuler" />
	</form>
 
 
</body> 
</html>

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email