Автоматическое изменение высоты textarea
Цель - сделать чтобы у элемента textarea
не было скроллбара и его высота изменялась автоматически в зависимости от количества вводимого текста.
Вариант 1
Чистый JavaScript.
Скопировано
<textarea oninput='auto_grow(this)'></textarea>
Показать код
Скопировано
textarea {
box-sizing: border-box;
resize: none;
overflow: hidden;
min-height: 50px;
}
Показать код
Скопировано
function auto_grow( el ) {
el.style.height = '0px';
el.style.height = ( el.scrollHeight ) + 'px';
}
Показать код
Вариант 2
Если подключен jQuery.
Скопировано
<textarea></textarea>
Показать код
Скопировано
textarea {
box-sizing: border-box;
resize: none;
overflow: hidden;
min-height: 50px;
}
Показать код
Скопировано
$( 'textarea' ).on( 'input', function() {
$(this).outerHeight(0).outerHeight( this.scrollHeight );
});
Показать код