Как сохранять высоту textarea при вводе?

Есть поле textarea, у которого стоит expandable - 1, min-rows - 1, max-rows- 20, resize: vertical. Если поле растянуть и перейти к заполнению других полей на странице, высота растянутой textarea сохраняется, но если растянуть и начать вводить в нем какие-либо символы, оно схлопывается до min-rows-1. Подскажите, есть ли способ сделать так, чтобы высота растянутого поля сохранялась и при вводе/удалении символов независимо от количества контента и схлопывание не происходило?

Дополнительно:

Ответы:

Попробуйте так

<textarea id="myTextarea" oninput="autoResize()"></textarea>

<script> function autoResize() {       const textarea = document.getElementById('myTextarea');       textarea.style.height = '';       textarea.style.height = textarea.scrollHeight + 'px'; } </script>

• Кстати, еще можно проверять высоту вот так:

  <style> textarea { resize: none; overflow: hidden; } </style> <textarea id="myTextarea" onkeydown="autoResize(event)"></textarea> <script> function autoResize(e) { const textarea = document.getElementById('myTextarea'); if (e.key === 'Backspace' || e.key === 'Delete') { textarea.style.height = ''; textarea.style.height = textarea.scrollHeight + 'px'; } } </script>

  <style> textarea { resize: none; overflow: hidden; } </style> <textarea id="myTextarea" onkeydown="autoResize(event)"></textarea> <script> function autoResize(e) { const textarea = document.getElementById('myTextarea'); if (e.key === 'Backspace' || e.key === 'Delete') { textarea.style.height = ''; textarea.style.height = textarea.scrollHeight + 'px'; } } </script>

  Здесь мы добавляем атрибут `onkeydown` в textarea, чтобы вызвать функцию `autoResize(event)` при нажатии клавиши на клавиатуре. В функции `autoResize()` мы получаем ссылку на textarea и проверяем, что нажатая клавиша — это "Backspace" или "Delete". Если это так, мы сбрасываем и устанавливаем высоту textarea так же, как и в первом примере.

• Анастасия Лисиченко, Здравствуйте, вариант function autoResize() {
  const textarea = document.getElementById('myTextarea');
  textarea.style.height = '';
  textarea.style.height = textarea.scrollHeight + 'px';
  } уже пробовал, к сожалению, не работает, второй вариант также не подойдет, потому как задача такова, чтобы поле изначально было с resize: vertical. Но все равно спасибо вам за внимание и предложенные варианты, буду пробовать еще.
• Анастасия Лисиченко, Там еще такой момент, scrollHeight отвечает за высоту контента внутри элемента, а при растяжении поля контента по факту внутри нет, т.к. мы ничего не вводим, а просто тянем поле за треугольник в нижнем углу, поэтому при вводе/удалении срабатывает схлопывание до минимальной высоты, которая задана через min-rows-1.

https://medium.com/@chandrahasstvs/building-your-o...