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

Question

[Евгений Усачев]

У меня есть 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>

Comments

[Антон Литвиненко]

как бы текстареа не расширяется это его такое поведение. добавляется скролл внутри

[Евгений Усачев]

Антон Литвиненко, тогда для моих целей мне следует использовать input ?

[Антон Литвиненко]

Евгений Усачев, если вы желаете такое поведение как в чатах соцсетей, то вот есть код
https://wp-kama.ru/id_112/avtomaticheskoe-rastyagi...

[Евгений Усачев]

Антон Литвиненко, спасибо. Но я уже реализовал это чрез div с before. Но спасибо за то, что сказали:текстареа не растягивается.

[profesor08]

Антон Литвиненко, какая-то жуть, а не решения.

[Антон Литвиненко]

profesor08, ну я как понял нужно чтобы поле ввода расширялось. Ссылка из закромов то. Опять же. Не в ответ пишу

Answer 1

[profesor08]

Вся сложность заключается в том, чтоб узнать именно высоту содержимого. Тут поможет 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. размеры внутренних отступов и рамок надо будет тоже учитывать, но там все просто.

Answer 2

[Илья Корень]

Как вариант, можно также использовать атрибут rows.
Навесить слушатель, считать кол-во символов и увеличивать/уменьшать значение атрибута rows у textarea.

Comments

[profesor08]

70 символов: IIIIIIIIII IIIIIIIIII IIIIIIIIII IIIIIIIIII IIIIIIIIII IIIIIIIIII IIIIIIIIII

70 символов: WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW WWWWWWWWWW

А еще шрифты бывают разные, а еще их может не быть и врубиться какой-то системный. Так что не вариант.

[Илья Корень]

profesor08, согласен, об этом не подумал.