Как средствами css сделать высоту textarea по содержимому
@Oleg Ponomarchuk, Вас [сюда][1] или [сюда][2]. В конце концов, если без всяких «плюшек и рюшек», то [можно сделать так][3]. [1]:jquerylist.ru/forms/jquery-plugin-autoresize.html [2]:jacklmoore.com/autosize [3]:jsfiddle.net/w6S76
19 июл 2014 в 14:58
6 ответов 6
Сортировка: Сброс на вариант по умолчанию
В данном случае советую вместо textarea использовать:
Я редактируюсь!
Отслеживать
ответ дан 1 янв 2017 в 16:29
MobiDevices MobiDevices
7,299 5 5 золотых знаков 27 27 серебряных знаков 71 71 бронзовый знак
Ваш ответ не добавляет ничего нового в уже выданные ответы, кроме того, что вы «приводите полный фрагмент кода» (весьма банальный). Я рекомендую сосредоточиться на вопросах, которые в настоящий момент неотвечены. Здесь же вы и людям не поможете, да и репутации (если вас это сильно интересует) особо не насобираете.
Изменение размеров textarea и других элементов
В CSS 3 появилось свойство resize, которе указывает, можно ли пользователю изменять размеры текстового поля и других элементов. Возможны значения:
| none | Запрещено изменять размеры |
| both | Можно изменять размеры |
| horizontal | Только по горизонтали |
| vertical | Только по вертикали |
| inherit | Наследует значение родителя |
Запретить растягивание
resize: none – запрещает растягивание textarea и убирает уголок ресайза.
Делаем textarea с автоматической высотой — краткий гайд
Как сделать поле для воода текста textarea, которое будет растягиваться по ширине контента. Используем CSS + HTML и совсем чуть-чуть JS.
Способом поделился пользователь Твиттера «Кричащий банан».
Предупреждая возражения, да, он не идеален, а в реплаях даже указали короткий код со Stack Overflow.
Однако способ из Твиттера весьма и весьма прикольный, отличается хитростью на грани с костыльностью и не требует вычислений.
Вот, что у вас получится:
Приступим. Сперва создайте обыкновенный блок div, а под ним расположите textarea.
В блок вставьте рандомный текст. Кричащий банан использовал Lorem Ipsum — классика.
Оба блока должны генерировать один и тот же текст. В местах, где строка должна переноситься на новый абзац в поле ввода, добавьте тэг br внутри блока div.
Для этой же разбивки в коде указываем text.split(/\r?\n/g) . Создаём компонент для разбивки, оборачиваем строки во фрагменты и не забываем указать тэг br.
Задаём блоку div и textarea одинаковые className и описываем свойства. Все свойства должны совпадать, кроме высоты.
В div добавляем свойство break-word, а textarea перемещаем поверх блока. Добавляем к окошку текста позиционирование absolute, а высоту выстраиваем в 100%. Таким образом, высота textarea будет равна высоте div, а границы textarea будут растягиваться по высоте контента.
Если вы хотите узнать ещё больше про фишки на HTML + CSS, научитесь делать простейшие анимации:
Как сделать чтобы textarea растягивался под текст
Для иллюстрации работы данного скрипта, на чистом javascript, нам потребуется.
1). textarea — высота которого будет растягиваться в зависимости от содержимого:
2). Скрипт, который будет растягивать выше приведенный textarea по содержимому!
var tx = document.getElementsByTagName(‘textarea’);//РАСТЯГИВАЕМ_textarea
tx[i].setAttribute(‘style’, ‘height:’ + (tx[i].scrollHeight) + ‘px;overflow-y:hidden;’);
tx[i].addEventListener(«input», OnInput, false);
this.style.height = (this.scrollHeight) + ‘px’;//////console.log(this.scrollHeight);
Пример textarea который растягивается автоматически по содержанию на чистом javascript
Пример для данного скрипта, на отдельной странице
Скачать скрипт автоматического растягивания textarea по содержанию на чистом javascript
У нас есть отдельная страница, на которой мы складываем скрипты, которые могут быть выделены в отдельный архив.
, что скрипт должен стоять после формы, если вы хотите его поставить выше, то его нужно обрамлять в:
window.onload = function()< скрипт >
Автоматическая высота textarea по высоте с обращением к id
Для иллюстрации второго примера растягивания высоты поля textarea при наборе текста, нам опять потребуется поле textarea , но здесь скрипт будет обращаться к textarea по его id
1). Вставляем атрибут id=»любое_слово»
2). Внутри скрипта есть два вызова функции flexibleTextarea — их может быть сколько угодно. внутрь вставляем тот ид, который у вас в textarea :
flexibleTextarea(‘ любое_слово ‘);
Скрипт, который растягивает высоту textarea по содержимому
var a = document.getElementById(b) || b;
var e = a.rows = a.rows > 0 ? a.rows : 2;
b = a.cols = a.cols > 0 ? a.cols : 20;
a.onkeyup = a.onkeydown = function ()
a.value = a.value.replace(g, «$1\r\n$2»);
for (var c = 0, d = a.value; d.search(f) >= 0;)
flexibleTextarea(‘ любое_слово ‘);
flexibleTextarea(‘ ещё ‘);
Поскольку, здесь вызов функции обернут в onload , то данный скрипт можно располагать, где захочется.
Пример автоматическое изменение высоты textarea по высоте с обращением к id
И для данного примера тоже сделали отдельный пример, на отдельной странице!
Скачать скрипт автоматическое изменение высоты textarea по высоте с обращением к id
Автоматическая высота textarea с использованием jQuery
1). Самым первым вам понадобится подключить jquery
2). Опять повторяемый тестовый textarea
3). Скрипт, который растянет очередной textarea при вводе очередного текста
Скрипт — автоматическая высота textarea с использованием jQuery
$(document).on(«input», «textarea», function ()
Для данного скрипта не имеет значение расположение! Не нужно указывать дополнительных параметров!
Что скрипт, должен стоять после подключения библиотеки.
Пример растягивания textarea по высоте с использованием jQuery
Соберем всё перечисленное вместе и поместим на тестовую страницу
Скачать скрипт автоматическая высота textarea с jQuery
Autosize по высоте textarea при помощи библиотеки autosize.js
Автоматическая высота textareaс использованием autosize.js, библиотеку можно скачать 1). здесь -> autosize.js., либо 2). она(библиотека) будет внутри скрипта , в виде файла, 2.1). прямо вовнутрь тестового файла поместим саму библиотеку! В примере подключение через файл будет заэкранировано.
Включение подключение библиотеки autosize.js
1). Вы должны были скачать, либо не скачать скрипт autosize.js, он будет в архиве ниже.
2). Подключение как обычное подключение скрипта.
Можете посмотреть на него вживую
2.1). Повторяюсь, в тестовом файле всю библиотеку скопировал и вставил в тестовый файл, а верхнее подключение заэкранировал.
3). Для работы autosize.js вам нужно активировать autosize:
window.onload = function()
Пример автоматической высоты textarea при помощи библиотеки autosize.
Собираем все вместе и получаем тестовую страницу с autosize.js
Скачать библиотеку Autosize.js с тестовым файлом
Contenteditable — как автоматическая высота блока
Это не касается поля ввода textarea, но отдельную страницу, пока не собираюсь делать страницу, а сюда точно в тему.
Как работает Contenteditable !?
Во внутрь тега помещаем атрибут contenteditable со значением true
Здесь текст в div с атрибутом contenteditable=»true» Поставьте сюда мышку и попробуйте набрать текст
Не благодарите, но ссылкой можете поделиться!
Временная ссылка для быстрейшей индексации : список всех квадратных корней.
Комментариев : 3 COMMENTS+ BBcode
скопировать ссылку
26/08/2020 08:02 Павел
Здравствуйте. Пишу плагин для таблицы, в таблице много textarea, плагин и таблица расположены в скрытой вкладке аккардиона, при раскрытии аккардиона не могу запустить скрипт изменения высоты (displey:none) а метод на основе Jqueru я понял, не меняет высоту если мой плагин и таблица в скрытом родителе, как тут быть. Искал событие реагирующее на изменение высоты, не нашёл, аккордеон самописный, как вариант в самом аккордеоне при открытии добавлять проверку всех textsrea, но этот вариант делает мой плагин для таблицы не автономным, дайте совет.
скопировать ссылку
26/08/2020 04:22 Марат Павел
Столько написали и ничего не понятно!
У вас есть textarea со свойством «display: none;» — непонятно.
зачем textarea скрытый и зачем для этого изменять его высоту.
х.з. зачем, ну ладно. примените «opacity: 0;»
скопировать ссылку
26/08/2020 05:57 Павел Марат
textarea В таблице, а таблица в родительском div, а этот див является частью аккордеона, сам textarea без displey: none, но когда разворачивается аккардион, приходится либо как-то отслеживать высоту таблицы в которой находится textarea (в модуле для таблицы) либо в функционал аккордеона закладывать пересчёт высоты при клике на вкладку Аккардиона
А статьи я читаю внимательно, и при закладывании функционала пересчета (основанном на Jquery) высоты в функционал аккардиона все работает, однако при попытке запихнуть этот функционал на jqueru внутрь разрабатываемого модуля для таблицы, я не могу отследить из этого модуля события аккардион (могу, но будет некрасиво), при попытке отследить Изменения высоты таблицы (Через переменную) не могу подобрать такого события.
Буду рассчитывать на ответ.
dwweb.ru есть здесь: