Textarea высота по содержимому

Bittles, если вам нужно, чтобы размер (высота) textarea автоматически увеличивалась при наборе или вставки текста (символов), а при их удалении чтобы размер textarea также уменьшался, то следующий код справиться с этой задачей:

Как средствами css сделать блок textarea во всю высоту по содержимому?

4 ответа 4

можно абсолютным позиционированием например.

вот и растянет тебе.

В данном случае советую вместо textarea использовать:

Используй div с аттрибутом contenteditable . Только он не будет чатью формы и в нём можно форматировать текст.

Подробнее про вариант с contenteditable в этом ответе.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

Связанные

Похожие

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.1.17.35809

Сайты и его элементы становятся все более гибкими по отношению к пользователям, сам контента адаптивный по ширине экрана, меню превращается в кнопку с тремя-четырьмя полосками и т.д. Один из показателей гибкости – адаптация поля textarea к содержимому, о нем-то и пойдет речь далее.

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

Читайте также:  После обновления драйвера видеокарты синий экран

Именно с этим и борется «резиновый textarea», так он называется благодаря тому, что растягивается в высоту в зависимости от количества введенных строк. Такое поле ввода для текста, кстати, имеет и социальная сеть ВКонтакте. Пользователи начинают привыкать к тому, что поле для ввода текста не требует от них никаких других действий, а разработчики делают все, чтобы повысить юзабилити сайта. Установите небольшой код, чтобы подружить пользователя со своим сайтом.

Простая установка

1. Добавьте следующий код в имеющийся на сайте JS-файл или внизу страницы, предварительно заключив код в :

2. К полю textarea прикрепите атрибут data="elastic" . Пример кода поля:

3. Если у поля textarea появляется полоса прокрутке, то скройте ее с помощью стиля overflow: hidden , вот так:

Не забудьте подключить jQuery, если на вашем сайте он не подключен. На сайтах uCoz эта библиотека подключается автоматически.

Принцип работы скрипта незамысловатый

Скрипт копирует поле textarea и его содержимое, все это обновляется и проверяется при вводе. Таким образом, скрипт задает высоту такую же как и у клона. Он, кстати, является простым блочным элементом.

В старых версиях браузера IE (ниже 8-ой) могут возникнуть проблемы. Если имеется необходимость, то можете задать свой вопрос на форуме или ниже в комментариях.

Некоторые источники предлагают вот такое решение:

Как вы видите, переносы заменяются. Не обойтись из без свойства CSS word-wrap: break-word для скопированного элемента.