Автовысота 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
6393
Предыдущая запись Textarea для ввода SMS

Комментарии

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

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

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