Limiter nombre de caractères de PLUSIEURS textarea

**watchabongo** · 01/12/2008, 14h57

Bonjour,

mon problème est le suivant :
J'ai trouvé un script qui marche très bien quand on veut limiter le nombres de caractères d'un textarea. Mon problème est que je souhaite limiter le nombre de caractères de plusieurs textarea.
C'est à dire que par exemple j'ai 3 textarea et je souhaite que le total des caractères soit de maximum 50.
Je ne souhaite pas limiter un textarea, donc il se peut qu'n textarea est 50 caractères et donc les autres 0.
Je souhaite également qu'il y ait le compteur pour l'utilisateur et que ça bloque la saisie.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
 
/*
Form field Limiter script- By Dynamic Drive
For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
This credit MUST stay intact for use
*/
 
var ns6=document.getElementById&&!document.all
 
function restrictinput(maxlength,e,placeholder){
if (window.event&&event.srcElement.value.length>=maxlength)
return false
else if (e.target&&e.target==eval(placeholder)&&e.target.value.length>=maxlength){
var pressedkey=/[a-zA-Z0-9\.\,\/]/ //detect alphanumeric keys
if (pressedkey.test(String.fromCharCode(e.which)))
e.stopPropagation()
}
}
 
function countlimit(maxlength,e,placeholder){
var theform=eval(placeholder)
var lengthleft=maxlength-theform.value.length
var placeholderobj=document.all? document.all[placeholder] : document.getElementById(placeholder)
if (window.event||e.target&&e.target==eval(placeholder)){
if (lengthleft<0)
theform.value=theform.value.substring(0,maxlength)
placeholderobj.innerHTML=lengthleft
}
}
 
 
function displaylimit(thename, theid, thelimit){
var theform=theid!=""? document.getElementById(theid) : thename
var limit_text='<b><span id="'+theform.toString()+'">'+thelimit+'</span></b> characters remaining on your input limit'
if (document.all||ns6)
document.write(limit_text)
if (document.all){
eval(theform).onkeypress=function(){ return restrictinput(thelimit,event,theform)}
eval(theform).onkeyup=function(){ countlimit(thelimit,event,theform)}
}
else if (ns6){
document.body.addEventListener('keypress', function(event) { restrictinput(thelimit,event,theform) }, true); 
document.body.addEventListener('keyup', function(event) { countlimit(thelimit,event,theform) }, true); 
}
}
 
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans titre</title>
</head>
 
<body>
 
 
<form name="sampleform">
 
<textarea name="text1" id="text1" cols=25 rows=15></textarea><br>
<script>
displaylimit("","text1",20)
</script>
<p>
<textarea name="text2" id="text2" cols=25 rows=15></textarea><br>
<script>
displaylimit("","text2",20)
</script>
 
</form>
</body>
</html>

Je cherche de l'aide ou des conseils car je ne sais pas du tout vers quoi partir.
Merci d'avance.

**le_chomeur** · 01/12/2008, 15h54

créer une variable globale te permettant de vérifier le nombre de caractère de chacun de tes textaréa ...

**SpaceFrog** · 01/12/2008, 15h55

ben sur le onkeydow des textareas:

Code :

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

1
2
 
if((document.getElemntById('text1').value.length+document.getElemntById('text2').value.length+document.getElemntById('text3').value.length)>50){alert('trop de caractères'); return false}

voir vider le keycode ...

**watchabongo** · 01/12/2008, 18h31

Bon je suis reparti sur autre chose en essayant de fait par la méthode de Spacefrog :

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
<script type="text/javascript">
 
	 function verif_press(textarea,max,count) 
     {
		 if ((descriptif.value.length+descriptif2.value.length) > max -1){
		 return false
		 }
		 else { 
		 count.value = (descriptif.value.length+descriptif2.value.length) +1 ; 
		 return true;
		 }
     }
 
     function verif_change(textarea,max) 
     {
		 if ((descriptif.value.length+descriptif2.value.length) > max ){ 
		 alert('Vous ne pouvez rentrer que '+ max +' caractères maximum pour ce champs');
		 return false;
		 }
		 else return true;
     }
 
     function show_nb_car(textarea,count)
     {
		 count.value = (descriptif.value.length+descriptif2.value.length);
		 return true;
     }
 
     </script>
 
     </head>
     <body>
	 <form name="text1" method="POST" action="test.php">
	 <textarea name="descriptif" id="descriptif" cols="125" rows="6" rowForms="6"  onKeyup="show_nb_car(this,document.text1.nb_car_rappel)" onKeypress="return verif_press(this,20,document.text1.nb_car_rappel)" onchange="return verif_change(this,20)">aH</textarea><br/>
	 <textarea name="descriptif2" id="descriptif2" cols="125" rows="6" rowForms="6"  onKeyup="show_nb_car(this,document.text1.nb_car_rappel)" onKeypress="return verif_press(this,20,document.text1.nb_car_rappel)" onchange="return verif_change(this,20)">eh</textarea><br/>
 
     <span>Vous êtes à : <input type="text" name="nb_car_rappel" size="3" value="test"> / 20 caratères.</span>
	 </form>

J'ai quelques problèmes.
Sur Firefox
1/ je ne peux pas faire de suppr quand j'ai atteins le nbre maximum de caractères.

Sur IE
2/ ça ne marche pas, ni le compteur, ni le blocage.

**E.Bzz** · 02/12/2008, 11h05

Bonjour,

Code :

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

descriptif.value.length

Pas glop !
Utilise soit

Code :

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

document.getElementById('descriptif').value.length

soit

Code :

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

document.forms['name_du_form'].elements['descriptif'].value.length

Ou alors, c'est qu'il te faut utiliser le 'textarea' (dont le nom est très mal choisi => à changer) que tu passes en paramètre ...

EDIT : ou encore, 'descriptif' est une variable (non déclarée ici) et dans ce cas, c'est

Code :

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

descriptif.length

A+

**watchabongo** · 02/12/2008, 11h48

Merci, c'est ce que j'ai fini par trouver, merci pour l'astuce quand même.

J'ai fait un script différent selon le navigateur IE ou Firefox :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
//Declaration du nombre maximum de caractères
var maxCarac = 20;
//envoi du script en fonction du navigateur
NavVers = navigator.appVersion;
var NavVersion = NavVers.substring(0,23);
//Navigateur IE
if ((NavVersion=='4.0 (compatible; MSIE 6') | (NavVersion=='4.0 (compatible; MSIE 7')){
	document.write('<scr'+'ipt type="text/javascript" src="js/compteur-caractere-IE.js" ></scr'+'ipt>'); 
} 
//Navigateur Firefox
else{
document.write('<scr'+'ipt type="text/javascript" src="js/compteur-caractere-Firefox.js" ></scr'+'ipt>'); 
}

puis le js pour IE :
document.getElementById('textarea').value.length
et je les ai additionné comme pour firefox.

Par contre j'ai encore un problème sur Firefox. je ne peux pas supprimer un caractère quand j'ai atteind le nombre maximum, je vais essayé de me pencher sur les keycode en espérant que ce sera bon.

**watchabongo** · 05/12/2008, 11h15

Voila du côté des keycode ça passe.
Je le mets pour ceux que ça peut aider :
event.which==8

Limiter nombre de caractères de PLUSIEURS textarea

JavaScript

Discussions similaires

Partager

Partager