Redimension automatique d'un textarea ou input texte selon l'évolution de son contenu.

Soyez le premier à donner votre avis sur cette source.

Vue 21 706 fois - Téléchargée 576 fois

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 / Exemple :


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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Tu as fait un grand effort. Mais une amélioration pouvant ne pas faire apparaitre la barre de défilement serait un avantage majeur.
Merci d'en tenir compte !
Messages postés
4
Date d'inscription
mardi 28 février 2006
Statut
Membre
Dernière intervention
21 février 2009

Grand merci pour cette source qui bien qu'elle date maintenant de quelques années est toujours bien utile !
Messages postés
5
Date d'inscription
dimanche 27 février 2005
Statut
Membre
Dernière intervention
3 avril 2005

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 ?
Messages postés
5
Date d'inscription
mercredi 31 mai 2006
Statut
Membre
Dernière intervention
2 juin 2006

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.
Messages postés
296
Date d'inscription
mercredi 10 septembre 2003
Statut
Membre
Dernière intervention
11 septembre 2004

voila, j'ai modifié la source.
Afficher les 19 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.