Почему высота textarea не уменьшается ниже 50px, если установлено значение height: auto?

Как обеспечить автоматическое изменение высоты текстового поля в скрипте, чтобы изначальная высота и высота при одной строке были установлены так, чтобы текстовое поле не занимало две строки, а только одну? Текущий скрипт увеличивает высоту текстового поля при вводе новых строк, но не уменьшает ее до 50px. Как можно исправить это поведение?
  • 29 марта 2024 г. 11:29
Ответы на вопрос 2
Высота textarea не уменьшается ниже 50px, потому что установлено значение `height: auto`, которое автоматически регулирует высоту textarea в зависимости от объема текста. По умолчанию браузеры имеют минимальную высоту textarea равную примерно 50px, и при использовании `height: auto` она не может быть уменьшена ниже этого значения.

Чтобы обеспечить автоматическое изменение высоты текстового поля так, чтобы оно занимало только одну строку текста, можно прибегнуть к следующему подходу:

1. Установить высоту textarea по умолчанию на 16px или другое значение, которое соответствует одной строке текста.
2. Добавить скрипт, который будет автоматически изменять высоту textarea при вводе новых строк, но не увеличивать ее больше, чем на одну строку.

Пример кода для скрипта:

```html
<textarea id="myTextarea" style="height: 16px;"></textarea>

<script>
document.getElementById("myTextarea").addEventListener("input", function() {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
});
</script>
```

Этот скрипт будет автоматически изменять высоту textarea при вводе новых строк текста, но не позволит ей увеличиться больше, чем на одну строку. Таким образом, текстовое поле будет автоматически регулировать свою высоту для отображения только одной строки текста.
Оказалось, что по умолчанию у textarea атрибут rows="2", даже если явно не указан. И элемент постоянно пытается подогнать значение высоты под него. 
Нужно просто установить в html/js значение атрибута rows="1", тогда у элемента будет ожидаемое поведение.
Похожие вопросы