Автовысота textarea

Автоизменение высоты <textarea> можно сделать следующим способом:

<textarea id="textarea" placeholder="Введите текст..."></textarea>
HTML
$('#textarea').on('input', function(){
	this.style.height = '1px';
	this.style.height = (this.scrollHeight + 6) + 'px'; 
});
JS
#textarea {
	display: block;
	width: 500px;
	box-sizing: border-box;
	margin: 0 0 5px 0;
	padding: 10px;
	border: solid 3px #e06969;
	background-color: #fff;
	min-height: 54px;
	font-size: 14px; 
	line-height: 1.2;
}
CSS

(this.scrollHeight + 6) – подбирается экспериментально и зависит от толщины рамок и отступов.

JQuery плагин

Ещё есть расширение – Autosize. Он более стабильно увеличивает поле, задает min-height – поэтому не даёт возможности ресайзить меньше текущей высоты.

<textarea id="textarea" placeholder="Введите текст..."></textarea>

<script src="/jquery.min.js"></script>
<script src="/autosize/dist/autosize.min.js"></script>

<script>
autosize($('#textarea'));
</script>
HTML
09.10.2019, обновлено 21.02.2021
9574
Предыдущая запись Textarea для ввода SMS

Комментарии 2

Венер Альянсплюс Венер Альянсплюс
25 июля 2022 в 15:09
скрипт autosize.js не отрабатывает если textarea был скрыт.
У меня есть скрытый блок, в нем находится textarea, и есть кнопка при клике на которую блок становиться видимым, в этом случаю скрипт не работает.
Пробовал вешать срабатывание скрипта на событие onclick
autosize.update(document.querySelectorAll('textarea'))

Все тщетно =(
Little Imp Little Imp
25 марта 2023 в 06:44
Такое бывает с динамическими элементами на странице. На jQuery например для обработки динамических событий вешается отслеживание на статический элемент. Например на саму страницу:
$(document).on('click', 'element', function(){
	/*some code*/
}

Тебе это уже вряд-ли пригодится, но может кому-то понадобится

, чтобы добавить комментарий.

Другие публикации

Изменение размеров textarea и других элементов
В CSS 3 появилось свойство resize, которе указывает, можно ли пользователю изменять размеры текстового поля и других...
22609
-1
Автовысота редактора CKEditor
Сделать так, чтобы редактор растягивался на всю высоту контента можно с помощью плагина Auto Grow для CKEditor 4.
3552
-2
Проверка орфографии в браузере
В современных браузерах как правило есть модуль проверки орфографии в полях input, textarea и элементов с contenteditable=true.
2811
0
Не снимать фокус при клике по другому элементу
Имеем input text или textarea и кнопку с действием для выделенного текста. При нажатии на эту кнопку фокус перейдет к...
7504
+2
Получить выделенный текст из текстового поля
У текстовых полей (textarea, input text и т.д.) есть JS-свойства selectionStart и selectionEnd, которые возвращают...
6364
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43746
+34