Как сделать увеличивающееся при введении символов место для ввода

Question

Я хотел-бы узнать, как сделать увеличивающееся поле для ввода, вместо появляющегося скролла справа сбоку. Например на CSS HTML JS На примере вот так:

Answer 1

Вот пример на codepen

document.querySelectorAll('textarea').forEach(el => { el.style.height = el.setAttribute('style', 'height: ' + el.scrollHeight + 'px'); el.classList.add('auto'); el.addEventListener('input', e => { el.style.height = 'auto'; el.style.height = (el.scrollHeight) + 'px'; });});

Answer 2

Думаю, самое простое решение - редактируемый div:

document.getElementsByClassName("inputArea")[0].innerHTML = "";

.inputArea:empty::before {
    content: attr(placeholder);
    color: #888;
}

.inputArea {
    word-break: break-word;
    padding: 5px;
    background: #eee;
    outline: 0px #fff solid;
}

<div contenteditable="true" class="inputArea" placeholder="Введите текст">
</div>

При проверке оказалось, что нужна небольшая "инициализация" этого поля ввода, поэтому добавил строчку на js.

БЛОГ НА HUSL

Как сделать увеличивающееся при введении символов место для ввода

Ответы (2 шт):