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.
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 input - Meilleures réponses
- Input text area - Meilleures réponses
- Mettre automatiquement un caratère dans un input text ✓ - Forum - Javascript / DHTML
- Javascript : Input text automatique creation suppression - CodeS SourceS - Guide
- Javascript : Valider une date entrée dans un input text sans ajouter de séparateurs : - Guide
- Javascript autocomplete input text - Guide
- Probleme affichage dans un input text ✓ - Forum - PHP
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.
Commentaires
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.