compteur de caractère pour 5 textaera

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 :

 
<!--
 
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 :

 
 
<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 :

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 :

<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 sur www.javascriptfr.com 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 :

 
<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>
	
http://www.javascriptfr.com/codes/LIMITER-NOMBRE-CARACTERE-DANS-TEXTAREA-NOUVELLE-VERSION_34251.aspx	 
</body> 
</html>

		Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
compteur de caractère pour 5 textaera

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