begin process at 2010 03 21 11:03:59
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > LIMITER LE NOMBRE DE CARACTÈRE DANS UN TEXTAREA - NOUVELLE VERSION ?

LIMITER LE NOMBRE DE CARACTÈRE DANS UN TEXTAREA - NOUVELLE VERSION ?


 Information sur la source

Note :
Aucune note
Catégorie :Formulaire Classé sous :limiter, caractere, textarea Niveau :Initié Date de création :19/10/2005 Date de mise à jour :25/04/2006 14:48:32 Vu / téléchargé :24 734 / 643
Auteur : keskispas

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

 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

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


 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

29 octobre 2005 17:17:00 :
Mise à jour en référence à la remarque de "Meduse" qui désirait un décompte du nombre de caractères restant à saisir. C'est fait !
29 octobre 2005 17:26:33 :
Manque de modularité = création de fonction
25 avril 2006 14:48:33 :
Mise à jour en réponse à "krolineeeeeeee" qui voulais utiliser un contrôle RESET. Donc, krolineeeeeeee, 2 solutions : 1/ Soit tu utilises un INPUT, et non plus un DIV, pour faire le décompte des caractères restant ainsi cet INPUT sera vidé avec les autres contrôles lors du reset 2/ soit tu continues avec un DIV mais tu devras coder sa remise à zéro Dans les 2 cas, il faudrait compléter le reset du formulaire pour que soit affiché un nombre dans l'élement de décompte Ca ce passerait à peu près comme ça : <form ... onReset="javascript: viderChamp('controle_decompte');" > avec une fonction "viderChamp()" qui réécrirait le nombre original. Teste le nouveau code source pour comprendre, c'est plus parlant Sinon, la 2è mise à jour concerne le controle de décompte qui peut être soit un élément de mise en page HTML ou un controle de formulaire. Voilà voilà !

 Sources de la même categorie

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath
IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous
IMPLEMENTATION DE HASHTABLE par ousous
JAVASCRIPT.UTIL.ITERATOR par ousous
Source avec Zip Source avec une capture PALETTE DE COULEURS par titnome
Toutes les sources de la catégorie Formulaire

 Sources en rapport avec celle ci

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 une capture CONTRÔLE DU NOMBRE DE CARACTÈRES DANS UN CHAMPS TEXTAREA par masternico
Source avec Zip BBCODE! par DomJ

Commentaires et avis

Commentaire de bultez le 19/10/2005 13:07:37

pourquoi compliquer ?
<HTML>
<HEAD>
<script type="text/javascript">
function TextAreaEstRempli(moncontroletexte, nbcar)
{
  if (moncontroletexte.value.length > nbcar)
      moncontroletexte.value = moncontroletexte.value.substr(0, nbcar);
}
</script>
<TITLE></TITLE>
</HEAD>
<BODY>
<textarea onkeyup="TextAreaEstRempli(this,10);"></textarea>
</BODY>
</HTML>

Commentaire de keskispas le 21/10/2005 23:43:23

Je complique parceque si je viens avec ma souris et que je colle 500 caractères avec le clic droit dans ton textarea, ta fonction ne servira à rien car elle ne teste pas le bon évènement.

Dans ma description, j'ai écris : "On évite ainsi de répéter tous les évènements intérressants à chaque fois qu'on pose un textarea."

C'est exactement pour éviter ton code que j'ai créé celui là !

Commentaire de Meduse le 29/10/2005 08:45:50

Merci pour ton code mais il manque un décompte des caractère au fur et à mesure que l'utilisateur tape c'est caractère dans le textarea. as-tu un code tel celui la

merci

meduse

Commentaire de keskispas le 29/10/2005 17:18:11

Pour Meduse, la modification est dispo !

Commentaire de ruket01 le 24/11/2005 16:30:52

Merci pour ton code très efficace. Par contre, y a juste un truc que j'ai dû modifié à cause de warning sur la console JDOM (en tout cas avec Mozilla) car il vaut mieux récupérer les éléments avec un document.getElementById('monId').

Pour ça j'ai juste changé l'appel à LimiterTextArea par:

    LimiterTextArea('commentaire', 10, 'div_decompte');

et la fonction LimiterTextArea par:

    function LimiterTextArea(idArea, nbcar, idDecompte)
    {
        moncontroletexte = document.getElementById(idArea);
        moncontroledecompte = document.getElementById(idDecompte);

        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
        moncontroledecompte.innerHTML = NbCarRestant(moncontroletexte, nbcar);
    }

A part ça, le code est nickel. Merci encore.

Commentaire de paranonyme le 04/01/2006 10:10:04

Bonjour,

Une petite question par rapport à ce code, est-il possible d'insérez dans ma page 2 textarea avec des limitation de caractère différent?

Merci d'avance.

Commentaire de keskispas le 05/01/2006 10:41:15

Tout à fait. La fonction est paramétrable à chaque textarea. Je m'explique :

Pour ton 1er textarea:

      <textarea id="commentaire1" name="commentaire1" class="limiter"></textarea>
      <div id="div_decompte1" name="div_decompte1" class="decompte"></div>
      <script language="Javascript" type="text/javascript">
        LimiterTextArea(document.frmPage.commentaire1, 150, div_decompte1);
      </script>


Pour ton 2è :

      <textarea id="commentaire2" name="commentaire2" class="limiter"></textarea>
      <div id="div_decompte2" name="div_decompte2" class="decompte"></div>
      <script language="Javascript" type="text/javascript">
        LimiterTextArea(document.frmPage.commentaire2, 255, div_decompte2);
      </script>


Tu auras donc 2 textareas :
le premier nommé "commentaire1", avec un compteur "div_decompte1" et qui n'accepte que 150 caractères. Le second "commentaire2", avec le compteur "div_decompte2" et qui en accepte 255 maxi.

Voilà !

Commentaire de paranonyme le 09/01/2006 11:42:55

Bonjour, et Merci pour la réponse,

J'ai juste une dernière petite question.

Je suis sur mac et j'ai tester différents navigateurs en ma possession (camino, opera, safari, firefox, netscape). J'ai rencontré un problème uniquement avec netscape 7.2 mac, ça ne fonctionne pas.
Quelqu'un aurait-il une idée de ce qui pose problème et sur pc y a t'il un problème?
J'ai essayé de voir ce que le debugger racontait mais je ne sais pas la faire fonctionner, la javascript console indique div_decompte not defined?

...

Commentaire de keskispas le 10/01/2006 14:42:36

Dans le code
"LimiterTextArea(document.frmPage.commentaire, 10, div_decompte);"
remplace "div_decompte" par "document.div_decompte".

Je pense que ça vient de là

Commentaire de TetsuoSan le 26/02/2006 15:33:11

Très bonne source !
Moi qui ne fait pas de javascript, j'ai parfois besoin de quelques fonctions histoire de rendre mes sites plus fonctionnels, donc, merci beaucoup pour cette contribution.
PS : j'ai opté pour le GetElementByID proposé par RUKET01, afin de mieux correspondre aux normes W3C, et également pour eviter d'avoir à repérer le "form" dans lequel le controle se trouve.

Bonne continuation :)

Commentaire de krolineeeeeeee le 22/03/2006 15:03:06

Heu nikel ta source mais j'ai une petite question, quand je met le textarea dans un formulaire et je j'utilise un input de type 'reset', le compteur de caractères ne revient pas au nombre de départ, soit si j'ai une taille de 150 et ke je met 10 caractères dans la textarea, qd je reset, le text disparait mais le compteur reste à 140...
T'aurais pas une petite idée pour résoudre mon ptit bug stp??

Merci
kroline

Commentaire de saminfo25 le 17/05/2006 20:13:35

Moi je vous conseil le script:
http://www.phpfrance.com/forums/voir_sujet-16828.php?sid=99f6226b15232f12059efd8016e5625c

Commentaire de keskispas le 24/05/2006 12:10:11

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.

Commentaire de chankalan le 05/07/2006 08:38:45

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 !

Commentaire de bristohn le 12/08/2007 09:54:57

sympa ce code. merci

Commentaire de Dark_Balor le 27/05/2009 17:24:31

merci pour le code c'est exactement ce que je cherchais

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

simulateur de typo (police, font, caractere) [ par actesez ] Bonjour, est il possible de creer un simulateur de police en java, ajax, ...? Je tape mon texte, choisi ma police = aperçu du resultat merci Afficher / masquer (encore !?) [ par shumix ] Bonjour à tous,Je pense avoir bien cherché dans le forum, mais je n'ai pas trouvé ce qu'il me faut (ou bien je n'ai pas su l'adapter à mes besoins, ét Lecture fin de TextArea [ par fresk13 ] Bonjour à tous. Voila, je travaille actuellement sur un projet en PHP. Lors de l'inscription d'un utilisateur, avant l'apparition du formulaire d'insc controler un textarea et un champ de text [ par Medgueye ] Bonjour à tous;je sollicite de l'aide;j'ai dans une page html, deux zones (Z1 et Z2) de texte (textarea) et un bouton de sorte que je saisis sur Z1 et Validation de formulaire avec jQuery : problème textarea [ par Xaviou ] Bonjour à tous. Je me suis récement mis au JavaScript, et plus précisément à jQuery. Je rencontre quelques soucis pour la validation d'un formulaire Limiter la taille max d'une fenêtre [ par DK ONER ] Bonjour je suis en train de réaliser mon site internet, je l'ai conçu, sous flash, de manière à ce qu'il fonctionnne pour toute les résolutions jus un <br> dans un textarea [ par dolux64100 ] Bonjour, Je ne suis pas sur d être dans le bon sujet désolé je n e sais pas trop ou poster ce message, En faite je cherche un code qui affiche dire Textarea dans un tableau [ par YURIX ] Bonjour, Je viens d' écrire une fonction basique en javascript qui permet de modifier un textarea : onClick='document.forms.products_description.val Génerer un texte prédéfini dans un textarea à partir d'une balise type lien [ par incroayable ] Bonjour à tous, J'ai -un lien : Pour générer un lien "cliquez ici" -Un textarea permettant de décrire un produit. J'aimerai que lorsque l'utilis


Nos sponsors


Sondage...

Comparez les prix


HTC Magic
Entre 429€ et 429€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

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 : 1,622 sec (3)

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)