begin process at 2012 02 12 12:58:28
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Formulaire

 > REDIMENSION AUTOMATIQUE D'UN TEXTAREA OU INPUT TEXTE SELON L'ÉVOLUTION DE SON CONTENU.

REDIMENSION AUTOMATIQUE D'UN TEXTAREA OU INPUT TEXTE SELON L'ÉVOLUTION DE SON CONTENU.


 Information sur la source

Note :
9 / 10 - par 5 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Formulaire Niveau :Débutant Date de création :12/10/2003 Date de mise à jour :01/06/2006 04:34:42 Vu / téléchargé :16 856 / 481
Auteur : flashfun

Ecrire un message privé
Site perso
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (18)
Ajouter un commentaire et/ou une note

 Description

Dans certains formulaire les "textarea", "input texte" sont soit trop grand soit trop petit, alors j'ai adapter un programme que j'ai trouver pour que le "textarea" s'adapte automatiquement à son contenu.


Modification:
J'ai rajouter une autre fonction pour pouvoir imposé ses valeurs.

Source

  • <html><head><title>AutoRedimensionnement d'un textarea</title>
  • <script>
  • function textareaSize(zoneTexte) {
  • if (zoneTexte) {
  • nbrLignes=2;longueurDeLigne=2; // Taille minimal de la zone de texte.
  • nbrLignesMax=18;longueurDeLigneMax=9; // Taille maximale de la zone de texte.
  • lesLignes=escape(zoneTexte.value).split("%0D%0A");
  • if (lesLignes) {nbrLignes=lesLignes.length;}
  • if (nbrLignes>document.body.clientHeight/nbrLignesMax) {nbrLignes=document.body.clientHeight/nbrLignesMax;}
  • if (lesLignes) {
  • for(n=0; n<(lesLignes.length); n++) {
  • if (longueurDeLigne<unescape(lesLignes[n]).length) {longueurDeLigne=unescape(lesLignes[n]).length;}
  • if (longueurDeLigne>document.body.clientWidth/longueurDeLigneMax)
  • {
  • longueurDeLigne=document.body.clientWidth/longueurDeLigneMax;
  • nbrLignes+=unescape(lesLignes[n]).length/(document.body.clientWidth/longueurDeLigneMax);
  • }
  • }
  • }
  • else {longueurDeLigne=zoneTexte.value.length}
  • if (nbrLignes>document.body.clientHeight/nbrLignesMax) {nbrLignes=document.body.clientHeight/nbrLignesMax;}
  • zoneTexte.cols=(longueurDeLigne+1); // Charge le nombre de colonnes utile, plus une colonne pour la clarté
  • zoneTexte.rows=(nbrLignes+1); // Charge le nombre de lignes utile, plus une ligne pour la clarté
  • }
  • }
  • function textareaSizeLimites(zoneTexte,colMin,colMax,rowMin,rowMax) {
  • if (zoneTexte) {
  • nbrLignesMin=rowMin;longueurDeLigneMin=colMin; // Taille minimal de la zone de texte.
  • nbrLignesMax=rowMax;longueurDeLigneMax=colMax; // Taille maximale de la zone de texte.
  • nbrLignes=nbrLignesMin;
  • longueurDeLigne=longueurDeLigneMin;
  • lesLignes=escape(zoneTexte.value).split("%0D%0A");
  • if (lesLignes) {nbrLignes=lesLignes.length;}
  • if (nbrLignes>nbrLignesMax) {nbrLignes=nbrLignesMax;}
  • else if (nbrLignes<nbrLignesMin) {nbrLignes=nbrLignesMin;}
  • if (lesLignes) {
  • for(n=0; n<(lesLignes.length); n++) {
  • if (longueurDeLigneMin<unescape(lesLignes[n]).length) {longueurDeLigne=unescape(lesLignes[n]).length;}
  • if (longueurDeLigne>longueurDeLigneMax)
  • {
  • longueurDeLigne=longueurDeLigneMax;
  • nbrLignes+=unescape(lesLignes[n]).length/longueurDeLigneMax;
  • }
  • }
  • }
  • else {longueurDeLigne=zoneTexte.value.length}
  • if (nbrLignes>nbrLignesMax) {nbrLignes=nbrLignesMax;}
  • else if (nbrLignes<nbrLignesMin) {nbrLignes=nbrLignesMin;}
  • zoneTexte.cols=(longueurDeLigne+1); // Charge le nombre de colonnes utile, plus une colonne pour la clarté
  • zoneTexte.rows=(nbrLignes+1); // Charge le nombre de lignes utile, plus une ligne pour la clarté
  • }
  • }
  • </script>
  • </head><body>
  • <form name="menu1">
  • textareaSize(this) :
  • <TEXTAREA NAME="unescapettt" COLS=15 ROWS=1 onKeyDown="textareaSize(this);" onKeyUp="textareaSize(this);"
  • >Votre texte ici.</TEXTAREA>
  • <br/>
  • textareaSizeLimites(this,15,50,1,10) :
  • <TEXTAREA NAME="unescapettt" COLS=15 ROWS=1 onKeyDown="textareaSizeLimites(this,15,50,1,10);" onKeyUp="textareaSizeLimites(this,15,50,1,10);"
  • >Votre texte ici.</TEXTAREA>
  • <br/>
  • <input type="text" value="votre texte" size="11" style="font-family:Courier New;"
  • onKeyDown="if(this.value!='' && (this.value.length>this.size || this.value.length<this.size)) this.size=this.value.length;"
  • onKeyUp="if(this.value && (this.value.length>this.size || this.value.length<this.size)) this.size=this.value.length;">
  • </form>
  • </body></html>
<html><head><title>AutoRedimensionnement d'un textarea</title>
<script>
function textareaSize(zoneTexte) {
 if (zoneTexte) {
  nbrLignes=2;longueurDeLigne=2; // Taille minimal de la zone de texte.
  nbrLignesMax=18;longueurDeLigneMax=9; // Taille maximale de la zone de texte.
  lesLignes=escape(zoneTexte.value).split("%0D%0A"); 
  if (lesLignes) {nbrLignes=lesLignes.length;}
  if (nbrLignes>document.body.clientHeight/nbrLignesMax) {nbrLignes=document.body.clientHeight/nbrLignesMax;}

  if (lesLignes) {
   for(n=0; n<(lesLignes.length); n++) {
    if (longueurDeLigne<unescape(lesLignes[n]).length) {longueurDeLigne=unescape(lesLignes[n]).length;}
    if (longueurDeLigne>document.body.clientWidth/longueurDeLigneMax)
	 {
	 longueurDeLigne=document.body.clientWidth/longueurDeLigneMax;
	 nbrLignes+=unescape(lesLignes[n]).length/(document.body.clientWidth/longueurDeLigneMax);
	 }
   }
  }
  else {longueurDeLigne=zoneTexte.value.length}
  if (nbrLignes>document.body.clientHeight/nbrLignesMax) {nbrLignes=document.body.clientHeight/nbrLignesMax;}

  zoneTexte.cols=(longueurDeLigne+1); // Charge le nombre de colonnes utile, plus une colonne pour la clarté
  zoneTexte.rows=(nbrLignes+1); // Charge le nombre de lignes utile, plus une ligne pour la clarté
 }
}


function textareaSizeLimites(zoneTexte,colMin,colMax,rowMin,rowMax) {
 if (zoneTexte) {
  nbrLignesMin=rowMin;longueurDeLigneMin=colMin; // Taille minimal de la zone de texte.
  nbrLignesMax=rowMax;longueurDeLigneMax=colMax; // Taille maximale de la zone de texte.
  nbrLignes=nbrLignesMin;
  longueurDeLigne=longueurDeLigneMin;
  lesLignes=escape(zoneTexte.value).split("%0D%0A"); 
  if (lesLignes) {nbrLignes=lesLignes.length;}
  if (nbrLignes>nbrLignesMax) {nbrLignes=nbrLignesMax;}
  else if (nbrLignes<nbrLignesMin) {nbrLignes=nbrLignesMin;}

  if (lesLignes) {
   for(n=0; n<(lesLignes.length); n++) {
    if (longueurDeLigneMin<unescape(lesLignes[n]).length) {longueurDeLigne=unescape(lesLignes[n]).length;}
    if (longueurDeLigne>longueurDeLigneMax)
	 {
	 longueurDeLigne=longueurDeLigneMax;
	 nbrLignes+=unescape(lesLignes[n]).length/longueurDeLigneMax;
	 }
   }
  }
  else {longueurDeLigne=zoneTexte.value.length}
  if (nbrLignes>nbrLignesMax) {nbrLignes=nbrLignesMax;}
  else if (nbrLignes<nbrLignesMin) {nbrLignes=nbrLignesMin;}

  zoneTexte.cols=(longueurDeLigne+1); // Charge le nombre de colonnes utile, plus une colonne pour la clarté
  zoneTexte.rows=(nbrLignes+1); // Charge le nombre de lignes utile, plus une ligne pour la clarté
 }
}
</script>
</head><body>

<form name="menu1">
textareaSize(this) :
<TEXTAREA NAME="unescapettt" COLS=15 ROWS=1 onKeyDown="textareaSize(this);" onKeyUp="textareaSize(this);" 
>Votre texte ici.</TEXTAREA>
<br/>
textareaSizeLimites(this,15,50,1,10) :
<TEXTAREA NAME="unescapettt" COLS=15 ROWS=1 onKeyDown="textareaSizeLimites(this,15,50,1,10);" onKeyUp="textareaSizeLimites(this,15,50,1,10);" 
>Votre texte ici.</TEXTAREA>
<br/>
<input type="text" value="votre texte" size="11" style="font-family:Courier New;"
 onKeyDown="if(this.value!='' && (this.value.length>this.size || this.value.length<this.size)) this.size=this.value.length;"
 onKeyUp="if(this.value && (this.value.length>this.size || this.value.length<this.size)) this.size=this.value.length;">
</form>

</body></html>

 Conclusion

J'attend vos commentaires.

 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

25 août 2004 18:28:43 :
28 août 2004 02:52:41 :
Correction des balise input text.
01 juin 2006 04:34:42 :
J'ai rajouter une vérification, pour éviter l'agrandissement de la case en hauteur (Voir le commentaire de rleveau ).

 Sources du même auteur

ASCENSEUR, DÉPLACEMENT SANS FIN SAUF SURVOLE DE LA SOURIS. X...
DRAG AND DROP, TIRÉ ET DÉPLACÉ DES IMAGES, SANS MODIFIER LES...
LIMITE LA TAILLE D'UN TEXTAREA ( MAXLENGHT )
Source avec Zip MENU CONTEXTUEL CLICK DROIT AMELIORE
Source avec Zip CONVERTION ET RE-CONVERTION DU TEXTE EN MODE ASCII (AVEC LA ...
Toutes les sources de flashfun

 Sources de la même categorie

Source avec Zip Source avec une capture BOITE DE DIALOGUE MODALE DE SÉLECTION D'UNE LISTE D'ICONES par JJDai
Source avec Zip Source avec une capture RÉSOLUTION D'UN SYSTÈME D'ÉQUATIONS LINÉAIRES À N INCONNUES par william voirol
Source avec Zip Source avec une capture PLUGIN JQUERY LISTE MODIFIABLE (COMBO) AUTOCOMPLÉTÉE par medkarim
GESTION DE NUMÉRO DE TÉLÉPHONE SIMPLE DANS FIREFOX7 par rotomtom
Source avec Zip Source avec une capture RECOMMANDER CETTE PAGE AVEC MAILTO, ACCENT ET RETOUR LIGNE D... par weabow
Toutes les sources de la catégorie Formulaire

Commentaires et avis

Commentaire de Joelindien27 le 13/10/2003 11:45:08

Je pense que celà marche aussi avec les input text etc...

Pas mal, c'est assez marrant à voir ;)

Juste une chose, rajoute le " l " à ta dernière balise &lt;html&gt;
Je me doute que c'est juste une étourderie ;)

Commentaire de flashfun le 13/10/2003 22:27:55

&gt;&gt;Joelindien27
Merci, j'avais tapé trop vite.

&gt;&gt;Je pense que celà marche aussi avec les input text etc...
Oui, biensûr...

&lt;input type="text" value="votre texte" size="11"
style="font-family:Courier New;"
onKeyDown="if(this.value.length&gt;this.size || this.value.length&lt;this.size) this.size=this.value.length;"
onKeyUp="if(this.value.length&gt;this.size || this.value.length&lt;this.size) this.size=this.value.length;"
&gt;

Commentaire de Joelindien27 le 14/10/2003 10:15:49

Oui merci, c'est exactement ce que j'ai fait ;)

En tout cas niveau " effets spéciaux pas trop moches " c'est plaisant et marrant.

Bravo !

Commentaire de flashfun le 14/10/2003 20:07:29

Merci

Commentaire de jjdagadir le 17/10/2003 16:36:26

C EST TRES UTILE BRAVO MERCI - KENAVO -

Commentaire de Gorrk le 18/10/2003 13:03:41

Pas mal.

Commentaire de flashfun le 30/10/2003 11:40:18

Merci pour vos commantaires.

Je viens de rajouter une version paramétrable pour modifier le textarea,
car la première s'adaptait à la fenêtre, alors que je viens d'avoir besoin de limité la taille avec des valeurs.

Voilà, j'espère que cela vous seras utile.

KENAVO (le Bretagne me manque ;o) )

Commentaire de marte59 le 18/04/2004 16:40:10

Vérifiez vos fautes d'orthographe de Français !

Commentaire de frop01 le 27/08/2004 23:43:58

Très utile pour les formulaire, d'ailleurs je pense m'en servir.

Par contre pour l'input text, lorsque je supprime tous les caractères (backspace) et je tape un nouveau texte, il m'affiche une erreur !! c'est dù à quoi ?
(erreur : Could not set the size property ! Invalid property value ...)

Merci

Commentaire de flashfun le 28/08/2004 03:15:26

Voilà, le problème est résolue.

Merci pour tout vos messages.

Commentaire de frop01 le 28/08/2004 13:32:38

Merci.

Commentaire de S4RuM4N le 30/04/2005 13:25:54

pas mal :D   bravo


mais pour moi, un simple
<textarea style="width:100%"> Suffit et ca ne deplace pas les bords de la page :)

Commentaire de cyberastuces le 21/06/2005 11:41:25

Super merci pour cette source

Commentaire de rleveau le 31/05/2006 16:56:14

Merci flashfun,

J'ai juste un p'tit souci : si je tape un texte sans forcer de retour chariot, le script (textareaSizeLimites) ne comprend plus rien. Si on l'avait destiné à n'afficher que des textArea de 10 lignes maxi, il s'en moque et s'allonge sans limite.

N'étant pas assez balaize en javascript, j'ai pas pû y remédier...

Si qq'un avait une idée ???

Merci.

Commentaire de flashfun le 01/06/2006 04:35:52

voila, j'ai modifié la source.

Commentaire de rleveau le 01/06/2006 09:23:55

Génial !!!
Merci à toi Flashfun.
Juste un détail ;  le fichier qu'on charge en cliquant sur "Télécharger le ZIP" est l'ancienne version du script.
Tu bosses souvent jusqu'à 4h35 du mat' ;0)
Merci encore.
--
Rémy.

Commentaire de jarodxxx le 27/12/2006 15:11:30

Salut bravo pour le script tres bien fait ^^

Un detail toutefois me gêne , le CTRL+C ou CTRL+A ou meme le CTRL+V ne fonctionne plus dansle textarea ...

C rectifiable ?

Commentaire de Scorps le 20/02/2010 17:55:11 9/10

Grand merci pour cette source qui bien qu'elle date maintenant de quelques années est toujours bien utile !

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Acer Liquid (noir) (XP.H480Q.013)
Entre 300€ et 346€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Renewable Energy is Within Reach
Photo Photo aérienne de Saintes Maries de la Mer 

Visiter la photothèque
 
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 : 2,480 sec (4)

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)