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

Ce site au démarrage

begin process at 2012 02 05 22:51:20

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é :31 729 / 705

Auteur : keskispas

Ecrire un message privé

Commentaire sur cette source (17)

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

BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai

RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol

PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim

GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom

RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow

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

Commentaire de catlord le 20/05/2010 12:14:38

Très bon script, merci

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

Derniers Blogs

CSS CONTENT STATE SELECTORS (PERSONNAL DRAFT) par FREMYCOMPANY

MBA : POURQUOI FAIRE ET COMMENT LE CHOISIR ? par ROMELARD Fabrice

Y'A DES ERREURS QUI PEUVENT RENDRE LE DéVELOPPEUR VIOLENT par Aleks

[HYPER-V 3] PRéSENTATION DES COMMANDLETS POWERSHELL par Pierrick CATRO-BROUILLET

IIS7 - COMPRESSION GZIP par cyril

Forum

METTRE L'ARRIERE PLAN DE SITE WEB CHANGEABLE par hassen87

RE : AFFICHER UN IFRAME SELON UN SELECT par pascalito92140

RE : VéRIFICATION FORMULAIRE par jmeunier

RE : AFFICHER UN TABLEAU CACHé SUR UNE IMAGE par Julien39

COPIER / COLLER JAVASCRIPT PHP par fregeal

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Cherche referenceur astucieux
Budget : 1 500€
Recherche expert advisor sous mql4 hedging
Budget : 200€
Creation boutique en ligne iphone- android - Republication.
Budget : 4 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011