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 311 fois - Téléchargée 588 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.
J'attend vos commentaires.
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
- Input textarea
- Textarea - Meilleures réponses
- Textarea input - Meilleures réponses
- Afficher du texte arabe dans un textarea ou un input ✓ - Forum - Javascript / DHTML
- Vbs input - Conseils pratiques - Visual Basic / VB.NET
- Document createelement input - Conseils pratiques - Javascript
- Input type code postal - Guide
- C# gamepad input - Guide
Du même auteur (flashfun)
-
Ascenseur, déplacement sans fin sauf survole de la souris. xhtml
-
Miniature non écrasé, avec choix de la position du recadrage
-
Image miniature, limite la taille en hauteur et en largeur, garde les proportions
-
Drag and drop, tiré et déplacé des images, sans modifier les balises img +: ou en changeant l'id d'une balise
-
Supprime les répétitions de caractère ou suite de caractère.
Merci d'en tenir compte !
Un detail toutefois me gêne , le CTRL+C ou CTRL+A ou meme le CTRL+V ne fonctionne plus dansle textarea ...
C rectifiable ?
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.
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.