Надо расширить textarea от содержимого. Как это сделать?

У меня есть div, внутри которого есть textarea. Оба имеют height:auto и position:relative; Но, div не расширяется от содержимого textarea! Из-за этого textarea тоже не расширяется. Что делать?
<div id="input_offer_news" style="background-color:rgba(0,0,0,0.1);border-radius:4px;
position:relative;height:auto;min-height:20%;width:65.5%;margin-top:10px;padding-left:4px;padding-top:4px;">
                        <textarea style="border:none;background-color:rgba(0,0,0,0);outline:none;height:auto;margin-top:1%;min- 
                      width:70%;width:70%;max-width:70%;position:relative;" placeholder="Предложите новость..."></textarea>
</div>
  • Вопрос задан
  • 126 просмотров
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08 Куратор тега CSS
Вся сложность заключается в том, чтоб узнать именно высоту содержимого. Тут поможет scrollHeight. Но если растягивать постоянно, то и значение будет расти, а значит если удалить текст, то блок не уменьшится. Нужен какой-то трюк, чтоб сбросить его к нормальному, задав высоту 0. Юзер ничего не заметит и магия сработает.

const textarea = document.querySelector<HTMLTextAreaElement>("textarea");
const minHeight = 60;
const maxHeight = 260;

const constrain = (n: number, low: number, high: number) => {
  return Math.max(Math.min(n, high), low);
};

if (textarea !== null) {
  textarea.addEventListener("input", () => {
    textarea.style.setProperty("height", "0");
    textarea.style.setProperty(
      "height",
      constrain(textarea.scrollHeight, minHeight, maxHeight) + "px",
    );
  });
}


P.S. размеры внутренних отступов и рамок надо будет тоже учитывать, но там все просто.
Ответ написан
Комментировать
IlyaMalone
@IlyaMalone
Frontend Developer
Как вариант, можно также использовать атрибут rows.
Навесить слушатель, считать кол-во символов и увеличивать/уменьшать значение атрибута rows у textarea.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы