Для автоматического растягивания textarea по высоте при вводе текста можно использовать JavaScript. Есть несколько способов достижения этого эффекта.
1. Использование CSS свойства `resize`
Можно применить свойство `resize: vertical;` к textarea в CSS, чтобы она автоматически растягивалась только по вертикали. В этом случае, textarea будет растягиваться по мере ввода новых строк текста.
Пример CSS:
```css
textarea {
resize: vertical;
}
```
2. Использование JavaScript
Чтобы textarea растягивалась по высоте динамически, можно использовать JavaScript для изменения высоты textarea при изменении ее содержимого. Для этого можно добавить обработчик события `input` к textarea и менять высоту на основе `scrollHeight`, который предоставляет текущую высоту содержимого textarea в пикселях.
Пример JavaScript:
```javascript
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
});
```
Чтобы textarea оставалась с неизменной высотой после растягивания и заполнялась содержимым, а не схлопывалась после ввода или удаления символов, можно добавить ограничение на максимальную высоту textarea.
Пример CSS:
```css
textarea {
max-height: 200px; /* Максимальная высота textarea */
overflow-y: auto; /* Показывать полосы прокрутки, когда содержимое textarea превышает максимальную высоту */
}
```
Пример JavaScript:
```javascript
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
textarea.style.height = 'auto';
textarea.style.height = Math.min(textarea.scrollHeight, 200) + 'px';
});
```
Это позволит значениям в textarea представиться для пользователя непрерывными.