Автовысота textarea

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

<textarea id="textarea" placeholder="Введите текст..."></textarea>
HTML
$('#textarea').on('input', function(e) {
	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="/plugins/plugins//2.1.1/jquery.min.js"></script>
<script src="/plugins/autosize/dist/autosize.min.js"></script>

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

Поделится

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

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
12.12.2018 4634
В данном примере описано как вывести многоуровневый список checkbox и radio button из БД с помощью PHP функций...
09.11.2017 3033
Перетаскивание элементов списков, плитки и строк таблиц с помощью плагина jQuery UI Sortable и методы сохранения...
23.11.2017 10032
Виджет на JQuery и AJAX, который покажет результаты поиска непосредственно при вводе в текстовое поле.
25.09.2019 122
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
06.11.2017 6880
Селект с множественным выбором (select multiple) весьма не удобен, при выборе часто забываешь нажимать сtrl и все...
16.10.2018 2714