Recently, I have been doing a lot of Model-View-Controller work in ASP.NET which has caused me to have to use some more “old school” style HTML controls, instead of the .Net Server-side Controls I am so used to. I came along an interesting problem where I needed a text area which automatically changed it’s height to fit all the text in without a horizontal scroll bar, much like Facebook does with it’s wall.
I also wanted the Javascript to use the Javascript library for the event listening so I didn’t need to worry about the event handler quirks of the various browsers (and becasue that’s what I know). I post the solution that worked for me in the interest of creative commons.
If you have a textarea, with the wrap=”off” attribute set, then its even easier. Just replace the script tage above with this one:
I tried your code and it have a gap on empty linebreaks, as well it only works for one textarea because it is ID hard coded. So i made some changes to correct the linebreak gap and avoid this hardcoding…
I could be usefull
resizeIt = function(evt) {
var txArea = evt.element ? evt.element() : $(evt);
var str = $F(txArea);
var cols = txArea.readAttribute(‘cols’);
var linecount = 0;
$A(str.split(“\n”)).each( function(l)
{
linecount += l.length ? Math.ceil( l.length / cols ) : 1;
});
txArea.writeAttribute(‘rows’, linecount);
};
Event.observe(‘text-area’, ‘keyup’, resizeIt );
resizeIt(‘text-area’); //initial on load
Awesome, thanks for that. Very handy indeed.