Автоматическая высота textarea

В данной статье хочу поделиться своим способом сделать так, чтобы высота многострочного поля textarea изменялась автоматически по мере наполнения поля текстом. При этом реализация не будет требовать дополнительных фреймворков (только чистый JavaScript).

Рассмотрим необходимый html-код:

<textarea id="text_area" rows="2" onkeyup="textarea_resize(event, 15, 2);"></textarea>
<div id="text_area_div"></div>

Дополнительный слой нужен для корректного определения высоты текста в нашем поле ввода. Про функцию textarea_resize подробнее напишу ниже.

Сначала опишем необходимые CSS-стили:

#text_area
{
  width: 170px;
  height: 30px;
  overflow: hidden;
  padding: 5px;
  border: 1px solid #000000;
  font-family: Arial;
  font-size: 12px;
  color: #000000;
}
#text_area_div
{
  width: 170px;
  font-family: Arial;
  font-size: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
  visibility: hidden;
  position: absolute;
  left: -9999px;
}

В стиле самого поля мы указываем стартовую высоту, обязательное свойство overflow: hidden; (чтобы не было проблем с полосой прокрутки) и различные оформительские свойства. В стиле дополнительного слоя мы обязательно указываем одинаковые с полем свойства ширины, типа и размера шрифта. Также указываем необходимые свойства white-space, word-wrap. И в завершении делаем слой невидимым.

Осталось описать javascript функцию, привязанную к событию onkeyup поля ввода:

function textarea_resize(event, line_height, min_line_count)
{
  var min_line_height = min_line_count * line_height;
  var obj = event.target;
  var div = document.getElementById(obj.id + '_div');
  div.innerHTML = obj.value;
  var obj_height = div.offsetHeight;
  if (event.keyCode == 13)
    obj_height += line_height;
  else if (obj_height < min_line_height)
    obj_height = min_line_height;
  obj.style.height = obj_height + 'px';
}

Функция принимает 3 аргумента: объект события ввода, высота строки текста и минимальное число строк текста (обычно выставляю равному первоначальному числу строк поля).

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