I
Ivor Somerset
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
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>
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
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>