24 января 2011 г.

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';
}
}

3 комментария:

pontius комментирует...

более эфективной оказалась такая реализация

function autoresize(textarea) {
textarea.style.height='';
textarea.style.height=(20+textarea.scrollHeight)+'px';
}

prosto комментирует...

Да, я забыл исправить код в записи на ту версию, которую использую. Спасибо.

Vilerk комментирует...

IE не считает textarea.scrollHeight интом, поэтому лучше написать так:

textarea.style.height=parseInt(textarea.scrollHeight)+'px';