Делаем textarea с автоматической высотой — краткий гайд

Способом поделился пользователь Твиттера «Кричащий банан».

Предупреждая возражения, да, он не идеален, а в реплаях даже указали короткий код со Stack Overflow.

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

Вот, что у вас получится:

Приступим. Сперва создайте обыкновенный блок div, а под ним расположите textarea.

В блок вставьте рандомный текст. Кричащий банан использовал Lorem Ipsum — классика.

Оба блока должны генерировать один и тот же текст. В местах, где строка должна переноситься на новый абзац в поле ввода, добавьте тэг br внутри блока div.

Для этой же разбивки в коде указываем text.split(/\r?\n/g). Создаём компонент для разбивки, оборачиваем строки во фрагменты и не забываем указать тэг br.

Задаём блоку div и textarea одинаковые className и описываем свойства. Все свойства должны совпадать, кроме высоты.

В div добавляем свойство break-word, а textarea перемещаем поверх блока. Добавляем к окошку текста позиционирование absolute, а высоту выстраиваем в 100%. Таким образом, высота textarea будет равна высоте div, а границы textarea будут растягиваться по высоте контента.

Вот и всё! ?

Если вы хотите узнать ещё больше про фишки на HTML + CSS, научитесь делать простейшие анимации: