Как запретить растягивать 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 — Максимальная высота: элемент растёт вместе с содержимым только до этого предела.