1

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

2 ответа 2

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.

9
  • ваш пример не работает 7 фев 2021 в 13:50
  • @MaximLensky очень даже работает, попробуйте выполнить код на этой странице нажав на кнопку "Выполнить код".
    – goha
    7 фев 2021 в 13:51
  • ibb.co/tpqB00r смотрите 7 фев 2021 в 13:52
  • @MaximLensky работает 7 фев 2021 в 13:53
  • файерфокс - решения должны быть кроссбраузерные 7 фев 2021 в 13:56
2

Вот пример на 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'; });});

2
  • Хороший вариант, но я забыл добавить в пост что мне нужно именно на чистом HTML CSS или JS
    – goha
    7 фев 2021 в 13:10
  • Тут на чистом html js, в scss думаю не сложно пару элементов поменять. 7 фев 2021 в 13:11

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.