Text boxes can hold an unlimited amount of text (except where you use a Javascript to limit the input). Normally the textarea has (or acquires) scrollbars when the amount of text is too large to display in the defined area. If you are using a recent version of Internet Explorer or Netscape 6+ then the following text area will not use scrollbars, instead the textarea itself will grow to accomodate the amount of text that is entered into the field.
Note that this script doesn’t resize the text area in Netscape 4 or Opera 5/6. With Opera 7 the insertion point is unfortunately reset to the start of the field whenever the field gets resized but this was fortunately fixed in Opera 8 and the number of people still using Opera 7 is probably too low to worry about. With browsers (except for Opera 7) that don’t handle resizing the field properly it will behave normally with scrollbars.
So how do we get the textarea to resize itself on those browsers that can handle it? Well first we place the following Javascript into the head section of the page:
function sz(t) {
a = t.value.split(‘\n’);
b=1;
for (x=0;x < a.length; x++) { if (a[x].length >= t.cols) b+= Math.floor(a[x].length/t.cols);
}
b+= a.length;
if (b > t.rows) t.rows = b;
}
Then all we need to do is to add onkeyup=”sz(this);” to the textarea parameters to get the size of the textarea to be recalculated each time the content of the textarea is changed.
Note that the code is set up to make the textarea bigger whenever the content will not fit, the code tests if the calculated size is less than the existing size of the field and where that is the case the field is left alone. The code tests both for new line characters in the field content as well as text between new line characters that is too long to fit the textarea width and which will therefore wrap onto extra lines so regardless of what is entered into the field it should grow to allow the field content to be displayed without the need for scrollbars in most cases.
Because of the way that the browsers may wrap the field content early because the next word will not fit onto the end of the line there may be occasions where the textarea does not grow sufficiently to display the entire content but even in these rare cases all but one or two lines should be visible.
Of course reloading the page will reset the size of the text area back to its default size. The textarea(s) will automatically resize themselves back to the larger size when they get the focus via the keyboard. If you want the field to resize itself when it gets the focus via a mouse click as well, add onclick=”sz(this);” to the textarea tag.
Author: Stephen Chapman
Web Collections 
Erwin said,
October 21, 2009 at 10:40 am
Thanks. Your javascript is excellent…
Mark said,
November 21, 2009 at 3:54 pm
Read this interesting blog on growing a text area. I want to have a text area that is pre-filled with data, and that grows in size to accommodate that data. Here’s an example: http://ecosector.com/portal/profile?target=288
Chandra Sekar Vinod Kumar said,
November 23, 2009 at 5:05 am
Add this script at the bottom and above the tag
<SCRIPT LANGUAGE="JavaScript">
a = document.getElementById('longd').value.split('\n');
b=1;
for (x=0;x = document.getElementById('longd').cols) b+= Math.floor(a[x].length/document.getElementById('longd').cols);
}
b+= a.length;
if (b > document.getElementById('longd').rows) document.getElementById('longd').rows = b;
</script>
and also for textarea add the default columns and rows, for example,
<textarea name=”longd” cols=”38″ rows=”1″ id=”longd” readonly=”readonly”
“>content comes here</textarea>
fatjoze said,
May 26, 2010 at 9:05 am
great snippet mate
i just implement this in my website
thank you
Dmitry said,
November 1, 2010 at 8:02 am
document.getElementById(‘txt’).onscroll = function(){this.rows++}
Another easy way to grow textarea. Now I think over how to reduce it in the similar way.
sorry for bad english(
Dmitry said,
November 1, 2010 at 8:24 am
But if I add padding-bottom here, it won’t work. I try to make textarea like in facebook where writed ‘What’s on your mind?’, but without scrollbar absolutely and with padding-bottom to see that there is a free space to write..
Inuyasha said,
March 3, 2013 at 2:17 pm
Lovely!!! Thanks!
2010 in review « Web Collections said,
January 2, 2011 at 4:02 pm
[…] The busiest day of the year was September 15th with 87 views. The most popular post that day was Auto-Grow Textarea – doing it the easy way in Javascript. […]
Olof said,
May 4, 2011 at 8:03 am
Perfect!
vikas said,
June 29, 2011 at 6:39 am
what if we want to increase the width of the text area till we do not give line break, and increase the height of the textarea only if we give line break….
Brian Cryer said,
July 12, 2011 at 8:09 am
Nice article, but I did find it too restrictive that it counts new-lines as I wanted the textarea to grow as I type. So I adopted a different approach which was to compare the scrollHeight and clientHeight of the textarea, which I’ve written up here http://www.cryer.co.uk/resources/javascript/script21_auto_grow_text_box.htm if anyone is interested.
Jabster2k said,
August 24, 2011 at 1:55 am
For those using jQuery, you can use this as reference. Hope it helps.
a = $(this).val().split(‘\n’);
b = 1;
cols = $(this).attr(‘cols’);
rows = $(this).attr(‘rows’);
for (x = 0;x = cols) b += Math.floor(a[x].length/cols);
}
b += a.length
if (b > rows) $(this).attr(‘rows’,b);
Rob said,
November 3, 2011 at 4:00 pm
I used this code and overall it worked great BUT for some reason if I type in 18 characters it works fine, but if I type in 19 characters it grows by 2 lines instead of one, so by the time I enter 30 different lines, I have 30 extra lines at the bottom instead of just 1 or 2 lines. I tried expanding the textbox width but that didn’t seem to help at all. Any small change I can make to the code or any idea of anything I can do, I really need this functionality and it’s great, thank you!
Rob said,
November 3, 2011 at 8:39 pm
I got this to work by changing my columns from 0 to 40 (the number I needed.) thx.
demboskb said,
May 16, 2012 at 7:09 am
I just wrote a jQuery plugin for auto-sizing textareas using a slightly different approach because none of the plugins I found out there worked in all the cases and all the browsers I needed. I call it Yet Another Auto Resizer (YAAR), and you can find it here: https://github.com/bendemboski/jquery-yaar. I’d love to hear what folks think of it.
olga said,
May 25, 2012 at 5:59 pm
hello, can you guys help me…I created a simple form in Adobe Acrobat 9. I don’t know anything about coding/javascript etc. but I really need to have expandable text fields ( just three 3 boxes) in order to make this form work. Can someone help me on what exactly I should type when i run a custom validation script. thanks in advance for your help!!!!