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