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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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