Accueil > > > 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
 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.
 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
 Sources de la même categorie
 Commentaires et avis
|
Derniers Blogs
 TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Vincent Bellet et Baptiste Giraudier La BI dans SharePoint 2010, Les nouveaux services d'application dans SP2010 et SQL Server Reporting services 2008 R2. La BI dans SharePoint est généralisée pour tous afin de permettre à tous les coll...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice
Animé par: Arnault Nouvel et Antoine Dongois Le processus à prendre : Apprendre (découvrir la plateforme) Préparer (documenter l'historique et choisir la méthode de MAJ) Test (Test de MAJ) Implémenter (Effectuer la MAJ) Valid...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice TECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOURTECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOUR par ROMELARD Fabrice
Après un retour sur l'histoire des TechDays de Paris et le fait que ce soit le plus gros event MS au monde (du fait de sa gratuité), le président de MS France (Eric Boustoullier) a fait une présentation de la vision Microsoft pour les années à venir...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
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
|