Автоматическая высота textarea и убираем скролл в HTML/CSS

Быстрый ответ

Высота текстового поля может динамически изменяться с помощью JavaScript. Вначале установите значение style.height равным '5px', а затем присвойте ему значение scrollHeight. Решение, представленное ниже, работает безошибочно:

function autoGrow(el) {
  el.style.height = '5px';
  el.style.height = el.scrollHeight + 'px';
}

// Эту функцию следует привязать к событию 'input'
document.getElementById('textarea').addEventListener('input', function() {
  autoGrow(this);
});

С помощью данного кода, ваш элемент <textarea> будет плавно увеличиваться при вводе текста, избегая появления скроллбара.

За кулисами

Чтобы лучше понять, как работает автоматическая корректировка размеров, нужно рассмотреть понятие scrollHeight. Это величина, отражающая полную высоту содержимого элемента, включая его невидимую часть.

Установка style.height равным '5px' позволяет scrollHeight рассчитать требуемую высоту всего содержимого, убирая скроллбар. Пользователи ценят такой подход за удобство.

Обработка специальных случаев

Хотя базовый скрипт достаточно эффективен, есть ряд дополнительных требований, с которыми стоит разобраться:

Универсальность

Использование чистого JavaScript гарантирует кроссбраузерность и стабильное поведение системы без необходимости подключать сторонние библиотеки.

Подробнее об этом расскажет наш спикер на видео

Обработка событий загрузки страницы и изменения размеров окна

Советуем усовершенствовать функцию autoGrow, чтобы она активировалась и при загрузке, и при изменении размеров окна:

// Запускаем функцию при загрузке страницы
window.addEventListener('load', function() {
  autoGrow(document.getElementById('textarea'));
});
// И при изменении размера окна
window.addEventListener('resize', function() {
  autoGrow(document.getElementById('textarea'));
});

Связь с фреймворками

В проектах, основанных на jQuery, удобно использовать плагин AutoSize. При работе с AngularJS можно создать директиву с применением $timeout, чтобы учесть изменение scrollHeight после взаимодействий с DOM.

Контроль над размерами

Для того чтобы сохранять размеры текстового поля в пределах определённого диапазона, задайте ограничения в CSS, такие как min-height: 50px; и max-height: 200px;.

Для поклонников библиотек

Если ваш проект станет эффективнее от использования дополнительного скрипта или библиотеки, например Autosize.js от Джека Мура, то выбор этого метода будет обоснованным. Предпочитаете уже знакомый jQuery? Тогда рассмотрите применение AutoSize.

Использование Autosize.js:

// Автоматизируйте все текстовые поля без хлопот!
autosize(document.querySelectorAll('textarea'));

Использование jQuery AutoSize:

// Настройте все текстовые поля одной командой!
$('textarea').autosize();

Визуализация

Пример текстового поля, автоматически корректирующего свою высоту, можно представить в виде стакана, изменяющего свои пропорции в зависимости от количества наполнения.

| Количество текста | Соответствующая высота поля |
| ------------------ | -------------------------- |
| Малое              | 🥃 (низкий стакан)          |
| Среднее            | 🍹 (средний стакан)         |
| Большое            | 🍸 (высокий стакан)         |

Подобно стакану, текстовое поле изменяется так, чтобы уместить весь контент, избегая появления скроллбара.

Возникшие проблемы и их решения

Мерцание скроллбара

Если вы столкнулись с мигающим скроллом при изменении размера, укажите в CSS свойство overflow: hidden;. Это поможет избежать неожиданного появления полосы прокрутки.

Некорректный начальный размер

Причиной проблемы могут быть CSS-стили, которые мешают работе функции autoGrow. Уделите внимание свойствам box-sizing, padding, влияющим на размеры.

Производительность

При экстенсивном использовании текстовых полей или частой корректировке размеров производительность может снижаться. Оптимизировать обработку событий критически важно при изменении размеров окна.

Полезные материалы

1. Auto-Growing Inputs & Textareas | CSS-Tricks — подробно о механизме автоматического изменения размеров текстовых полей с использованием CSS и JavaScript.
2. Creating a textarea with auto-resize – Stack Overflow — обсуждения и различные решения задачи автоматического изменения размеров текстовых полей.
3. GitHub – jackmoore/autosize — простой скрипт для автоматической корректировки размеров текстовых полей.
4. Just a moment... – CodePen — интерактивный пример автоматической корректировки размеров текстового поля.
5. Autosize — легкий плагин jQuery для мгновенного изменения размеров текстовых полей.