1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Formulaire
  5. 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.

Soyez le premier à donner votre avis sur cette source.

Vue 22 962 fois - Téléchargée 607 fois

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

Ajouter un commentaire Commentaires
wil75
7 mai 2015 à 02:42
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 !
cs_Scorps
Messages postés
4
Date d'inscription
mardi 28 février 2006
Statut
Membre
Dernière intervention
21 février 2009
20 févr. 2010 à 17:55
Grand merci pour cette source qui bien qu'elle date maintenant de quelques années est toujours bien utile !
jarodxxx
Messages postés
5
Date d'inscription
dimanche 27 février 2005
Statut
Membre
Dernière intervention
3 avril 2005
27 déc. 2006 à 15:11
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 ?
rleveau
Messages postés
5
Date d'inscription
mercredi 31 mai 2006
Statut
Membre
Dernière intervention
2 juin 2006
1 juin 2006 à 09:23
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.
flashfun
Messages postés
296
Date d'inscription
mercredi 10 septembre 2003
Statut
Membre
Dernière intervention
11 septembre 2004
1 juin 2006 à 04:35
voila, j'ai modifié la source.
Afficher les 19 commentaires
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)