Textarea Auto Resize

Элемент <textarea> будет автоматически изменять свой размер, т.е. подстраиваться под количество строк вводимого текста. У элемента должен быть установлен атрибут onkeyup:

textarea.setAttribute('onkeyup', 'autoresize(this);');

Также задайте в css для <textarea> значение минимальной высоты min-height.

Теперь определим javascript-функцию autoresize, вызываемую каждый раз при нажатии на клавишу (при фокусе, установленном на наш элемент <textarea>):

function autoresize(textarea) {
textarea.style.height='';
if(parseInt(textarea.style.minHeight)<textarea.scrollHeight){
textarea.style.height=textarea.scrollHeight+'px';
}
}

Здесь выполняется вычисление размера элемента, и в случае превышения им минимально позволенного — подгон.


UPD 29.07.2011: ещё вариант:

function resize(id) {
var textarea = document.getElementById(id);
if (textarea.scrollHeight > textarea.clientHeight) {
textarea.style.overflowY = 'hidden';
textarea.style.height = textarea.scrollHeight + textarea.style.fontSize + 'px';
}
}