CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 02 10 12:48:01

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

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 046 / 632

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

LimiterTextArea.html 3 872 octets

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

CALCULS RAYNAUX V2 par Ali Bibi

VALIDATION D'UN FORMULAIRE par grarestephane

CHAT VIRTUEL par grarestephane

AJOUTER ET SUPPRIMER DES FICHIERS DANS UNE LISTE par grarestephane

TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE par vilfarfadet

WYSIWYG TOTALEMENT OO par coucou747

CURSEUR DANS TEXTAREA par PetoleTeam

CONTRÔLE DU NOMBRE DE CARACTÈRES DANS UN CHAMPS TEXTAREA par masternico

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 Récupérer la position du curseur dans un TEXTAREA [ par piment ] Comment récupérer la position du curseur dans un textarea ou la position en nombre de caractère depuis le début.Merci

Nos sponsors

Derniers Blogs

TECHDAYS PARIS 2010 : SHAREPOINT 2010 POUR LES DéVELOPPEURS par ROMELARD Fabrice

TECHDAYS PARIS 2010 : PLEINIèRE DERNIER JOUR par ROMELARD Fabrice

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

Forum

COUPER UNE PARTIE DE CHAINE par bydouille

JE VEUX LE CODE D'ANNIMATION AVEC JAVASCRIPT par dalinda

J'AI TROUVéE UN CODE SOURCE SUR INTERNET ET J'AI PAS LE COMPRIS par dalinda

RE : RéCUPERER LA TAILLE D'UN DIV par bumbo

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche formation complete en GIMP
Budget : 750€
Module sur Prestashop
Budget : 700€
Redaction d-une page de vente pour un ebook
Budget : 300€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5