Вход

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

Динамическое увеличение высоты 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'));

6 февраля 2018 /

4299 Views /

7 комментариев
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding