Unfortunately – in my opinion – your code isn’t formed very well. Therefore I coded my own version with your great idea based on the javascript framework Prototype.

Specials:
- I added a special selector, which allows me to add the effect to all textareas with a given class, id or whatever. This is modifiable of course.
- I find a solution without adding a wrapper around the textarea. Maybe it’s a bit flickerin in IE 6 … but I’m happy, that this works in IE 6 at all.

I tested this in Firefox 3, Safari 4, Opera 10, IE 7 and IE 8 on Win7 and Firefox 3, Safari 4, Opera 10, IE 6 on WinXP.

function resizeTextarea(textarea) {
var minHeight = parseInt(textarea.getStyle(’minHeight’));
textarea.style.height = minHeight + ‘px’;
var newHeight = textarea.scrollHeight;
if(Prototype.Browser.WebKit || Prototype.Browser.IE) {
var paddingTop = parseInt(textarea.getStyle(’paddingTop’));
var paddingBottom = parseInt(textarea.getStyle(’paddingBottom’));
newHeight = newHeight – (paddingTop + paddingBottom);
}
textarea.style.height = ((newHeight > minHeight) ? newHeight : minHeight) + ‘px’
}

$$(’textarea.autosize’).collect(function(textarea) {
textarea.style.overflow = ‘hidden’;
resizeTextarea(textarea);
textarea.observe(’keyup’, function() {
resizeTextarea(textarea);
});
});

I would be happy about any comments and feedback.

Keep it up!