Limiter le nombre de caractère dans un textarea - nouvelle version ?

Soyez le premier à donner votre avis sur cette source.

Vue 36 782 fois - Téléchargée 792 fois

Description

Il s'agit en fait de faire ce qui existe déjà mais en rendant le code plus modulaire.

Ici, il suffit de créer son contrôle et de lui affecter une fonction pour gérer la longueur du contenu sur plusieurs évènements

On évite ainsi de répéter tous les évènements intérressants à chaque fois qu'on pose un textarea.

C'est une première version alors si vous avez des remarques pour faire évoluer tout ça, je suis preneur !

Merci !

Source / Exemple :


<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 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="frmPage" action="Limiter.htm" method="POST"> 
		<textarea id="commentaire" name="commentaire" class="limiter"></textarea> 
		
		<!-- 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', 10, 'controle_decompte'); 
		</script> 
		<input type="reset" id="annuler" name="annuler" value="Annuler" />
	</form> 
</body> 
</html>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
3
Date d'inscription
mardi 13 janvier 2009
Statut
Membre
Dernière intervention
20 mai 2010

Très bon script, merci
Messages postés
2
Date d'inscription
lundi 26 juin 2006
Statut
Membre
Dernière intervention
27 mai 2009

merci pour le code c'est exactement ce que je cherchais
Messages postés
1
Date d'inscription
lundi 21 novembre 2005
Statut
Membre
Dernière intervention
12 août 2007

sympa ce code. merci
Messages postés
16
Date d'inscription
mercredi 2 mars 2005
Statut
Membre
Dernière intervention
17 décembre 2007

parfait parfait parfait, c'est exactement celui-ci que j'ai essayé d'écrire... mais keskispas l'avait déjà fait...

juste que pour 2 textarea, ça fonctionnait pas avec
LimiterTextArea(document.frmPage.commentaire2, 255, div_decompte2);
mais avec
LimiterTextArea(commentaire2, 255, div_decompte2);

merci pour ce code utile et intelligent !
Messages postés
46
Date d'inscription
vendredi 11 juillet 2003
Statut
Membre
Dernière intervention
26 août 2008

saminfo25 c'est pas mal mais on retombe dans tout ce que j'ai voulu éviter avec mon script :
- Le nombre de caractères max est DANS la fonction. Donc si on veut fixer plusieurs limites il faut dupliquer la fonction pour chacune d'entre elles.
- La référence aux évènements est inscrit dans chaque textarea, alors si on a 10 textareas, il faut enchainer les copier-coller pour chacun, en faisant gaffe au reste du dév qui pourrait s'appuyer sur ces mêmes évènements (contrôle de saisie...)
- les évènements OnKeyUp et OnKeyPress ne couvrent pas tous les moyens de mettre du texte dans un textarea (et donc d'en fixer les limites !) tel que le drag&drop avec la souris.

Donc, ton exemple est plus simple à comprendre, mais à l'usage plus lourd à maintenir.
Afficher les 17 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.