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

Для сохранения высоты текстового поля textarea при вводе, можно использовать JavaScript. Существует несколько подходов к решению этой задачи.

Первый подход - это использование события input. Событие input срабатывает каждый раз, когда пользователь вводит или изменяет текст в поле ввода. Мы можем привязать обработчик события input к нашему текстовому полю и в нем выполнять необходимые операции для сохранения высоты.

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});

В этом примере мы находим текстовое поле по его тегу textarea и привязываем к нему обработчик события input. Внутри обработчика мы устанавливаем высоту текстового поля в auto, чтобы сбросить предыдущую высоту, а затем устанавливаем высоту равной высоте содержимого путем присвоения scrollHeight.

Этот подход позволяет автоматически регулировать высоту текстового поля в зависимости от объема вводимого текста.

Второй подход - это использование библиотеки, такой как autosize. Библиотека autosize предоставляет минималистичное решение, которое автоматически изменяет высоту текстового поля при вводе текста.

Для включения autosize в проект, необходимо добавить ссылку на библиотеку в HTML:

<script src="https://unpkg.com/[email protected]/dist/autosize.min.js"></script>

Затем можно инициализировать autosize в JavaScript:

const textarea = document.querySelector('textarea');
autosize(textarea);

autosize ищет все текстовые поля на странице и автоматически добавляет обработчики событий input, которые изменяют высоту текстового поля при вводе.

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