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.9/5 (23 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é : 397x

Commentaires pour Ajuster automatiquement la hauteur d'un textarea

suba suba     12/20/2018 02:23
DtPvdq style is awesome, keep doing what you are doing!
suba suba     12/20/2018 00:00
qZmXWJ they have been a moment to consider taking a shot?
mia pron khalifa     12/19/2018 15:38
feYm9S You have made some really good points there. I checked on the internet for additional information about the issue and found most people will go along with your views on this web site.
i love pron     12/17/2018 08:48
du8UxW Wow, amazing weblog structure! How long have you been blogging for? you make blogging glance easy. The full glance of your site is magnificent, let alone the content!
suba suba     12/17/2018 06:49
UihOPc Thanks for sharing, this is a fantastic blog post.Thanks Again. Really Great.
see pron     12/17/2018 00:24
woy12y Thanks-a-mundo for the post.Really thank you! Awesome.
suba me     10/11/2018 20:03
e7Mkwb Thank you for your blog.Thanks Again. Fantastic.
suba pron     08/12/2018 17:38
Y2QBd1 It is really a nice and helpful piece of information. I am satisfied that you simply shared this helpful info with us. Please keep us informed like this. Thank you for sharing.
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