Автоматическое изменение высоты у элемента textarea

Для одного проекта передо мной стояла задача найти способ автоматически изменять высоту элемента textarea согласно тому контенту, который будет динамически загружаться посредством Ajax. Так как высота контента мне была неизвестна, а элемент textarea не может подстраивать свои размеры под контент так же гармонично, как это делают другие HTML элементы, то при каждом изменении контента мне приходилось вручную вносить высоту элемента в JavaScript.

Вроде ничего сложного. Найденные мною в интернете плагины и скрипты, решающие эту проблему, показались мне излишне запутанными, к тому же большинство решений включали в себя мудреные математические вычисления. Приведу более простое решение.

Воспользуемся невидимым элементом-клоном

Элемент <div> будет растягиваться, чтобы подстроиться под высоту своего контента (при условии отсутствия абсолютно позиционированных элементов и плавающих объектов). Итак, чтобы получить высоту textarea, нужно сделать следующее:

• Захватить контент, загруженный в элемент textarea
• Создать невидимый элемент-клон (div)
• Задать для элемента-клона такие же типографические свойства и ширину, как и у элемента textarea.
• Поместить контент в клон
• Получить высоту элемента-клона
• У элемента textarea высоту сделать равной высоте элемента-клона

Код

Ключевую роль в моем решении будет играть CSS. Как упоминалось выше, невидимый клон должен иметь те же типографические свойства, что и элемент textarea. Поэтому свойства font-size, font-family, white-space и word-wrap элемента-клона должны соответствовать свойствам font-size, font-family, white-space и word-wrap элемента textarea.

CSS

textarea {
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #444;
    padding: 5px;
}

.noscroll {
    overflow: hidden;
}

Заметьте, что мною был добавлен отдельный класс с объявлением overflow: hidden. Это было сделано для того, чтобы предотвратить появление scrollbar-ов. Обычно добавлять такое объявление тегу textarea весьма сомнительно. Но в нашем случае оно уместно, так как я буду менять размеры элемента textarea с помощью JavaScript. Этот класс будет добавлен к textarea посредством JavaScript, что обеспечит нам скроллирование поля формы в случае, если JavaScript выключен.

СSS невидимого элемента-клона

CSS

.hiddendiv {
    display: none;
    white-space: pre-wrap;
    width: 500px;
    min-height: 50px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    padding: 5px;
    word-wrap: break-word;
}

Краткий анализ: во-первых, я использую объявление display: none, так как я не хочу, чтобы блок-клон видел пользователь. Полагаю, что это сгодится и для скрин-ридеров, так как, опять же, я не хочу, чтобы они могли прочитать информацию с элемента-клона. Если у кого-то есть лучшее решение, чтобы спрятать блок от вспомогательных устройств, пожалуйста, дайте мне знать.

Свойству white-space задано значение pre-wrap, что означает: в тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, то текст автоматически будет перенесен на следующую строку. Элементу-клону я задал такую же ширину, как и у элемента textarea, и продублировал типографические свойства. И клон, и textarea имеют одинаковый min-height, чтобы они всегда изначально имели стандартный и практичный вид.

Перейдем к jQuery

JQuery

$(function() {
// описываем поле ввода (тег textarea)
	var txt = $('#comments'),
// создаем элемент-клон
	hiddenDiv = $(document.createElement('div')),
	content = null;
// добавляем класс .noscroll элементу #comments(эл-т textarea)
	txt.addClass('noscroll');
// добавляем класс .hiddendiv элементу-клону 
	hiddenDiv.addClass('hiddendiv');
//добавляем элемент-клон в тег  body 
	$('body').append(hiddenDiv);
//связываем событие keyup (пользователь отпускает 
//клавишу клавиатуры)
//c функцией. Все приминительно к элементу textarea#comments
	txt.bind('keyup', function() {
// возвращаем значение атрибута value  элемента 
// #comments(textarea)
// (вводимые пользователем данные)
	    content = txt.val();
// символ перевода каретки (\n), везде (g) меняем на <br>  
	    content = content.replace(/\n/g, '<br>');
	    hiddenDiv.html(content);
// назначаем высоту элемену #comments(эл-т textarea)
	    txt.css('height', hiddenDiv.height());

	});
});

Этот код показывает, что нашей целью является единственный элемент textarea на странице. В случае, когда этих элементов несколько, нужно изменить первую строку в функции, где идет описание элемента, с которым мы работаем.

Как видите, высота будет меняться автоматически посредством событие keyup. Очень удобно, если для загрузки контента вы используете Ajax.

Как насчет IE6-8?

Я чуть не бросил написание этой статьи, так как код не работал в IE6-8. Не работал он в связи со слабой обработкой в IE внутреннего содержания HTML. Решение я все же нашел, плюс мне попался jQuery плагин. Он использует тот же метод, что и я (клонированный элемент), и работал он (главным образом) в IE.

Вот строка, которую я позаимствовал из этого примера и которая решает (главным образом) мою проблему с IE:

CSS

content = content.replace(/\n/g, '<br>'); 

Однако даже после добавления этой строки все еще оставалась одна загвоздка: длинные строки текста не влияли на высоту элемента textarea. Решить эту проблему помогло добавление к элементу-клону объявление word-wrap: break-word к CSS.

Взглянуть на демо вы можете, кликнув по ссылке ниже. Дайте мне знать, если столкнетесь с какими-либо проблемами.

Использованы материалы статьи