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

Télécharger le projet
Commenter

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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (flashfun)