Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Как запретить растягивать textarea

Короткий ответ

Свойство resize: none убирает уголок, за который пользователь тянет поле:

<textarea rows="3" placeholder="Your message" style="resize: none; width: 260px;"></textarea>

Только по высоте

Чаще удобнее разрешить менять высоту, но не ширину — так поле не сломает раскладку страницы:

<textarea rows="3" placeholder="Drag the corner down" style="resize: vertical; width: 260px; min-height: 60px; max-height: 200px;"></textarea>

min-height и max-height задают пределы, за которые растянуть не получится.

Высота по содержимому

Новое свойство field-sizing: content заставляет поле само расти по мере ввода текста. Там, где оно не поддерживается, поле просто останется обычного размера:

<textarea placeholder="Type several lines" style="field-sizing: content; min-height: 3lh; width: 260px; resize: none;"></textarea>

Частая ошибка

Ставят resize: none полю для длинных отзывов и комментариев и задают маленькую высоту. Пользователь пишет несколько абзацев в окошке на две строки и не может его увеличить. Запрещайте растягивание, только если поле само подстраивается под текст или текст заведомо короткий.

Функции из этого ответа

  • resize — Может ли пользователь менять размер элемента, перетаскивая его угол.
  • <textarea> — Многострочное текстовое поле.
  • min-height — Минимальная высота: элемент не ниже этой высоты, но может расти.
  • max-height — Максимальная высота: элемент растёт вместе с содержимым только до этого предела.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.