Я хотел-бы узнать, как сделать увеличивающееся поле для ввода, вместо появляющегося скролла справа сбоку. Например на CSS HTML JS
На примере вот так:
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.
-
-
@MaximLensky очень даже работает, попробуйте выполнить код на этой странице нажав на кнопку "Выполнить код".– goha7 фев 2021 в 13:51
-
-
-
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'; });});
-
Хороший вариант, но я забыл добавить в пост что мне нужно именно на чистом HTML CSS или JS– goha7 фев 2021 в 13:10
-