Динамическое увеличение высоты textarea

Сегодня мы рассмотрим как сделать динамическое увеличение высоты textatrea в зависимости от его контента. Для этого будем использовать библиотеку Autosize js.

Так или иначе каждый верстальщик сталкивался с элементом формы textarea и его атрибутами rows и cols. Проблемы начинаются, когда требуется создать сложную вёрстку в которой textarea может быть заполнен объёмным тестом, а объёмный текст сложно форматировать так как rows и cols ограничивают видимую область.
 
Существуют два решения данной ситуации:

• Верcтальщик изначально увеличивает значения атрибутов rows и cols, что позволяет показывать пользователям больше вводимого кода, но не удобно в случае ввода небольшого текста (занимает много рабочего места)
• Или использовать JS для увеличения размеров textarea в зависимости от вводимого сообщения. Данный вариант мне кажется наиболее удобным и речь пойдёт именно о нём.

Autosize js

Для создания данного эффекта нам потребуется библиотека autosize js

Ссылка на документацию: autosize js
 
Кроме подключения самой библиотеки, нам потребуется ещё jQuery. Чтобы подключить данный эффект к элементу на страницы используем следующий код:
 

1
2
3

autosize($('textarea'));
// или
autosize(document.querySelectorAll('textarea'));