Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Self-resizing textarea

Reply
Thread Tools

Self-resizing textarea

 
 
Ivor Somerset
Guest
Posts: n/a
 
      11-24-2006
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>
 
Reply With Quote
 
 
 
 
Ivor Somerset
Guest
Posts: n/a
 
      11-24-2006
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.
 
Reply With Quote
 
 
 
 
Jonas Raoni
Guest
Posts: n/a
 
      11-24-2006
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to add </textarea> within <textarea> tags? frank.moens@gmail.com Javascript 1 07-04-2007 04:00 PM
Textarea Inside of a textarea wperry1@gmail.com ASP General 6 02-05-2006 08:00 AM
remembering last position in textbox / textarea and returning to after post / reload jason@cyberpine.com ASP .Net 3 10-05-2003 05:56 PM
Removing carriage returns from <textarea></textarea> input Augustus ASP General 1 09-10-2003 04:55 AM
msword-like textarea? Bei ASP .Net 2 07-02-2003 04:46 PM



Advertisments