Code solutions to PHP, JS, CSSCode source PHP, JS, CSS

Répandez vos soluces sur la planète

Love me
Solucior » JAVASCRIPT » Ajuster automatiquement la hauteur d'un textarea

Ajuster automatiquement la hauteur d'un textarea

05/13/2011 par Dux   -   3.8/5 (21 notes)

Ce petit bout de code composé de 3 fonctions très simples va redimensionner en hauteur un textarea suivant son contenu pendant la frappe.
Ce javascript va utiliser la valeur scrollTop du textarea pour calculer la hauteur à appliquer.

Demo.


code source



 
<script type="text/javascript">
function
haut(idt) {
   if (
document.getElementById(idt).scrollTop > 0) aug(idt);
}
function
aug(idt) {
   var
h = parseInt(document.getElementById(idt).style.height);
   
document.getElementById(idt).style.height = h + 10 +"px";
   
haut(idt);
}
function
top(idt) {
   
document.getElementById(idt).scrollTop = 100000;
   
haut(idt);
}
</script>

<textarea name="txt_test" style="width: 700px; height: 150px" id="txt_test" onkeyup="javascript: haut(this.id)" onfocus="javascript: top(this.id)"></textarea>

Testé avec Safari  Google Chrome  Firefox3  Firefox4  
Noter ce code     |     Copié : 336x

Commentaires pour Ajuster automatiquement la hauteur d'un textarea

subastian     11/27/2016 08:28
Am5aQ2 This is a terrific website. and i need to take a look at this just about every day of your week ,
suba bob     11/27/2016 00:29
lbLMfy Informative and precise Its difficult to find informative and precise info but here I found
Yep     05/07/2015 01:38
C'est bien. Si on pouvait l'améliorer afin de réduire la taille quand le contenu diminue, ce serait interessant.
Merci
Johnd625     11/25/2014 10:26
I really enjoy the article post. Cool. dadekdafeefd
Johnd356     11/25/2014 10:26
Im not that much of a online reader to be honest but your blogs really nice, keep it up! I'll go ahead and bookmark your site to come back later. All the best eecgbeeaekge
Yep     05/23/2013 15:23
Thx mais si tu rajoutes une ligne avant la dernière ligne ça taff pas
pipe     03/20/2013 18:34
ty
Tab     12/03/2012 15:39
Thank you
SaïB     06/26/2012 08:09
Merci pour ce code
Thanks for this code, very helpfull
octameter     06/11/2012 21:04
nice workaround! thx octameter
Ajouter un commentaire Pseudo   Site
ZOOM