Textarea to fit text size

how to do as in PHPMyAdmin textareas?

[Apple7]

Hello!

I need to make textarea form field automaticly resizable when text overflows (have seen that realized in PHPMyAdmin but couldn't figure out how).

That question was brought up in [webmasterworld.com...]
but it seems to me that it was a wrong forum department and the solution offered doesn't work too.

Could you please help?

[Trace]

Seems simple enough. My first thought would be to get the content of the textarea, place it in a span of the same width then set the height of the textarea to the height of the span.

Does that make sense?

Something like this should work;

<!-- Css -->
<style type="text/css">
#mySpan{
/* width is 25px less than textarea to compensate for no scrollbar */
width:300px;
font-family:Arial;
font-size:11px;
visibility:hidden;
}
#myTextArea{
width:325px;
font-family:Arial;
font-size:11px;
}
</style>

<!-- Html -->
<span id="mySpan"></span>

<form action="http://www.google.com" method="post">
<textarea id="myTextArea">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis non mi. Nam erat quam, malesuada in, dictum a, luctus in, ipsum. Sed aliquam pharetra nisi. Vestibulum rhoncus.</textarea>
</form>

<!-- JavaScript -->
<script type="text/javascript">
/* get the contents of the textarea and place it in the span */
document.getElementById("mySpan").innerHTML = document.getElementById("myTextArea").value;
/* get the new height of the span and set that height to the textarea */
document.getElementById("myTextArea").style.height = ((document.getElementById("mySpan").offsetHeight)+10) + "px";
</script>

You'll need to do some tweaking for things like line breaks in the textarea and placing the span somewhere it won't be in the way, but you get the idea.