Автоизменение размера textarea в зависимости от контента

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

Если вам нужно, чтобы <textarea> на лету меняло свой размер в зависимости от объема вводимого текста, воспользуйтесь следующим JavaScript-скриптом:

document.querySelector('textarea').addEventListener('input', function () {
  this.style.height = 'auto';
  this.style.height = `${this.scrollHeight}px`;
});

Этот код позволяет <textarea> гибко отреагировать на изменение вводимого текста и расшириться по мере необходимости.

Обеспечение кроссбраузерности

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

Браузеры, как и пользователи, бывают разные. Задача разработчика — гарантировать совместимость его продукта с большинством версий браузеров. Для обеспечения кроссбраузерной совместимости можно использовать подход, описанный ниже:

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

function autoResize() {
  textarea.style.height = 'auto';
  textarea.style.height = textarea.scrollHeight + 'px';
}

if (textarea.attachEvent) {
  textarea.attachEvent('oninput', autoResize); // Для устаревших версий браузеров
} else {
  textarea.addEventListener('input', autoResize);
}

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

Реакция на разнообразные события ввода

Обратите внимание, что действия пользователей могут быть разные — вставка, вырезание и перетаскивание текста также влияют на размер <textarea>. Учтите это и подпишитесь на соответствующие события:

['input', 'cut', 'paste', 'drop'].forEach(function(event) {
  textarea.addEventListener(event, autoResize);
});

Обработка динамически загружаемого контента

Если контент <textarea> загружается асинхронно, то обработчик события load поможет корректно инициализировать размер поля после полной загрузки страницы:

window.addEventListener('load', autoResize);

Стилизация для удобства и функциональности

Минималистичные стили для концентрации внимания пользователя

Применение простых стилей позволит пользователям сфокусироваться на главном — создании контента:

textarea {
  min-height: 40px;
  overflow-y: hidden; // Прячем вертикальный скроллбар
  border: none; // Убираем рамку
  background-color: #f5f5f5; // Нейтральный фон
  resize: none; // Запрещаем пользователю изменять размеры
}

Разумное изменение размеров и учёт отступов

Позвольте <textarea> расти не только в высоту, но и учитывать внутренние отступы (padding) для удобного ввода текста:

function autoResize() {
  var pad = 10; // Определяем отступ в 10px
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight + pad) + 'px';
}

Учёт производительности

Оптимизация при работе с множеством полей

При работе с несколькими текстовыми полями важно оптимально подходить к обработке событий, чтобы избежать лишней нагрузки на систему. Используйте техники throttle или debounce для ограничения частоты вызовов функции.

Независимость от сторонних библиотек

Несмотря на популярность таких библиотек, как jQuery, лучше всего придерживаться "чистого" JavaScript. Это сделает ваш код более легким и не зависящим от сторонних ресурсов.

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

Вообразите, что <textarea> — это воздушный шар, который надувается по мере ввода текста пользователем:

🎈                            🎈🎈📝
(Пустой воздушный шар)       (Надувающийся шар с содержимым)

По мере ввода текста <textarea> становится выше, предоставляя пользователю удобное пространство для выражения своих мыслей.

Совершенствование пользовательского опыта: Советы от профессионалов

Начало работы с текстом

Облегчите пользователям взаимодействие с интерфейсом, устанавливая автофокус на <textarea> после загрузки страницы:

window.addEventListener('load', function () {
  document.querySelector('textarea').focus();
});

Проверка изменений в JSFiddle

Вы можете протестировать своё решение на веб-сайте JSFiddle. Это позволит вам быстро увидеть результат работы вашего кода и внести необходимые коррективы.

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

1. Изучите элемент <textarea> в документации MDN и зайдите глубже в его возможности и особенности.
2. Изучите различные способы создания авторесайзабельных текстовых полей на Stack Overflow.
3. Ознакомьтесь с простым скриптом Autosize, который автоматически адаптирует высоту текстового поля к содержимому.
4. Подробно разберитесь в работе с событиями в браузере на MDN, используя метод addEventListener().
5. Глубже изучите тему автоматического изменения размеров текстового поля, прочитав статью на сайте Impressive Webs.
6. Если всё-таки предпочитаете использовать jQuery, рассмотрите плагин Autosize из официального реестра.