Делаем textarea с автоматической высотой — краткий гайд
Как сделать поле для воода текста textarea, которое будет растягиваться по ширине контента. Используем CSS + HTML и совсем чуть-чуть JS.
6К открытий8К показов
Способом поделился пользователь Твиттера «Кричащий банан».
Предупреждая возражения, да, он не идеален, а в реплаях даже указали короткий код со 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, научитесь делать простейшие анимации:
6К открытий8К показов
Разобрали профессию аналитика данных: в каких задачах он нужен, какие инструментами пользуется для работы, и рассказали, где можно их изучить.
О том, как стать айтишником, для начинающих IT-специалистов и тех, кто хочет сменить профессию рассказали руководители IT-компаний.
На Youtube-канале Slaying The Dragon вышло видео о том, как можно научиться CSS-анимациям, используя два пути.
Рассказали, какие основные ошибки делает начинающий Python-разработчик, как их можно избежать и на что в целом обращать внимание.