By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,960 Members | 1,351 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,960 IT Pros & Developers. It's quick & easy.

Self-resizing textarea

P: n/a
Hello,

At http://tuckey.org/textareasizer/ there's a script that autoresized
the height of the textareas in a form so that it matches the content.
This is a very interesting capability, however that script has a big
drawback: the number of rows (lines) needed to fit the content is an
estimate (based on the "cols" attribute in "textarea") and in most cases
the textarea box will not match exactly the content.
So I've thought of an improvement based on the difference between the
"viewport" of the textarea (given by clientHeight) and the total height
of the content (=scrollHeight). So long as the scrollHeight is larger
than the clientHeight, a new row is added. There's also a test to cater
for the reverse effect, ie when rows must be withdrawn.

I give you the script as is. It works in FireFox but not in IE (I
haven't tried other browsers). Comments and improvements will be
appreciated.

<html>
<head>
<style type="text/css">
<!--
textarea {overflow:hidden;}
-->
</style>
<script type="text/javascript">
<!--
function autoResizeTextareas(){
var form = document.forms[0];
for (var x in form) {
if (!form[x]) continue;
if(typeof form[x].rows != "number") continue;
while((form[x].scrollHeight == form[x].clientHeight) && (form[x].rows
0)) form[x].rows--;
if(form[x].scrollHeight form[x].clientHeight){
while(form[x].scrollHeight form[x].clientHeight) form[x].rows++;
}
}
setTimeout("autoResizeTextareas();",300);
}
// -->
</script>
</head>
<body onload="autoResizeTextareas();">
<form>
<textarea cols="60" rows="1" name="textarea1">Some text</textarea>
</form>
</body>
</html>
Nov 24 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Ivor Somerset escreveu:
I give you the script as is. It works in FireFox but not in IE (I
haven't tried other browsers). Comments and improvements will be
appreciated.

function autoResizeTextareas(){
var form = document.forms[0];
for (var x in form) {
if (!form[x]) continue;
This will be true only if form[x] is a property with a value that when
turned into boolean becomes false.
if(typeof form[x].rows != "number") continue;
Why not a loop in form.elements? Then you look for the type property, if
it's equals to "textarea". ^^

while((form[x].scrollHeight == form[x].clientHeight) &&
(form[x].rows 0)) form[x].rows--;
if(form[x].scrollHeight form[x].clientHeight){
while(form[x].scrollHeight form[x].clientHeight)
form[x].rows++;
Instead of increasing/decreasing rows, why don't you try: style.height =
scrollHeight + "px"
setTimeout("autoResizeTextareas();",300);
Hmmm, I think you should assign this to a key event/onchange instead of
checking every 300msec.
--
Jonas Raoni Soares Silva
http://www.jsfromhell.com
Nov 24 '06 #2

P: n/a
Hello Jonas,
if (!form[x]) continue;
This will be true only if form[x] is a property with a value that when
turned into boolean becomes false.
It was in the original script. In fact I don't see why this test is
necessary.
>
if(typeof form[x].rows != "number") continue;

Why not a loop in form.elements? Then you look for the type property, if
it's equals to "textarea". ^^
Also in the original script. In my opinion, not a bad way to test if the
element is a textarea.
> while((form[x].scrollHeight == form[x].clientHeight) &&
(form[x].rows 0)) form[x].rows--;
if(form[x].scrollHeight form[x].clientHeight){
while(form[x].scrollHeight form[x].clientHeight)
form[x].rows++;

Instead of increasing/decreasing rows, why don't you try: style.height =
scrollHeight + "px"
> setTimeout("autoResizeTextareas();",300);

Hmmm, I think you should assign this to a key event/onchange instead of
checking every 300msec.
Two excellent ideas.
Nov 24 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.