Адаптивная высота textarea без клавиатурного ввода текста (текст вводится JS)?

Question

[Игорь]

Добрый день!

Столкнулся с тем, что все предлагаемые способы адаптации высоты textarea основаны на вводе в поле текста.
У меня текст вводится по клику (из другого JS) и он помещается в textarea и не адаптирует высоту поля под себя.

Текста всегда разное кол-во.

Comments

[Ankhena]

основаны на вводе в поле текста

Запускайте пересчет по той же кнопке.

Или используйте div contenteditable true.

Что именно у вас не получилось?

[Игорь]

Ankhena, или как вариант - добавить в js ввода текста в эту textarea ограничение по кол-ву вводимых знаков.
Это возможно? Не подскажете как?

<script>document.querySelectorAll('.copy-button').forEach(btn => {
  btn.addEventListener('click', () => {
    const id = btn.dataset.id;
    const text = document.getElementById(id).textContent;
  
    document.getElementById('textarea-el<?php echo $wo["comment"]["id"];?>').value = text;
  });
});</script>

[Ankhena]

Игорь, подскажу: гуглите как обрезать строку на js.

[alexalexes]

Я бы добавил обработчик change к textarea - в нем бы подрезал изменяемый контент.
После вставки value дергал бы change(), чтобы было идентично вводу текста, тогда все сопутствующие обработчики будут работать одинаково.

[Everything_is_bad]

ты опять прибежал сюда вместо того чтобы погуглить, давай уже учись самостоятельно искать решение.

Answer 1

[Airat Galiullin]

Что-то типо такого не подходит?

<textarea id="myTextarea" rows="1" style="overflow:hidden; resize:none;"></textarea>
<button onclick="insertText()">Вставить текст</button>

function autoResizeTextarea(textarea) {
  textarea.style.height = 'auto'; // сброс высоты
  textarea.style.height = textarea.scrollHeight + 'px'; // установка по контенту
}

function insertText() {
  const textarea = document.getElementById('myTextarea');
  textarea.value = 'Это текст, вставленный скриптом. Он может быть длинным и занимать несколько строк.';
  autoResizeTextarea(textarea);
}