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

Question

[sergeM93]

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

Answer 1

[Анастасия Foxman]

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

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

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

Comments

[Анастасия Foxman]

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

<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 так же, как и в первом примере.

[sergeM93]

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

[sergeM93]

Анастасия Лисиченко, Там еще такой момент, scrollHeight отвечает за высоту контента внутри элемента, а при растяжении поля контента по факту внутри нет, т.к. мы ничего не вводим, а просто тянем поле за треугольник в нижнем углу, поэтому при вводе/удалении срабатывает схлопывание до минимальной высоты, которая задана через min-rows-1.

Answer 2

[Антон Швец]

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