Пользователи, которые используют браузеры Firefox, Google Chrome или Safari, знают, что новые версии этих браузеров позволяют изменять размер текстовых областей на сайте. То есть у них появляется уголок, за который можно потянуть и изменить размер textarea. До недавнего времени я думал, что избавиться от этого невозможно, но не так давно узнал, что всё-таки можно. Поэтому в этой статье я познакомлю Вас с тем, как запретить изменение размеров textarea.
Пусть у нас имеется следующий HTML-код:
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 12.10+ | 5.0+ | 4.0+ | 1.0+ |
Задача
Сделать, чтобы размеры текстового поля созданного через тег
не изменялись при помощи мыши.
Решение
В современных браузерах Firefox, Safari и Chrome в правом нижнем углу текстового поля есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля.
Рис. 1. Вид текстового поля в браузере Chrome
Вид уголка различается, но его функции остаются одинаковыми, если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea задать свойство resize со значением none (пример 1).
Приветствую вас на сайте Impuls-Web!
Навигация по статье:
Иногда, при верстке сайта, в частности, при работе с контактными формами возникает необходимость в HTML запретить изменение размера textarea. Вызвать такую необходимость могут разные причины. Например, вы хотите убрать уголок-индикатор, позволяющий растянуть текстовое поле из правого нижнего угла:
Или же вы хотите ограничить возможности пользователя по изменению размера поля textarea по горизонтали или по вертикали, для того, что бы сохранить верстку от нежелательных искажений:
Для поля textarea HTML запретить изменение размера можно несколькими способами.
Как в HTML полностью запретить изменение размера textarea?
Если вы хотите полностью заблокировать изменение размера текстового поля textarea, а так же убрать уголок-индикатор, то наиболее эффективным будет использование свойства resize со значением none.
Как видите, уголок-индикатор исчез, и для пользователя нет возможности растянуть поле.
Как для textarea HTML запретить изменение размера в одном направлении?
Но такой вариант не всегда удобен, так как по умолчанию для текстового поля может быть задана слишком маленькая высота, и пользователю будет неудобно вводить текст в это поле:
В таком случае было бы намного разумнее для textarea HTML запретить изменение размера, в зависимости от верстки, только в одном направлении. Например, в моем случае, при растягивании поля по ширине, поле уходит за пределы формы, и это существенно портит внешний вид. Но если растянуть поле в низ, то с версткой ничего страшного не произойдет, просто форма станет немного больше по высоте, и в тоже время, для пользователя будет намного удобнее вводить текст:
Чтобы добиться такого результата, нам нужно задать для свойства resize одно из этих значений:
- vertical – разрешает изменение размера текстового поля по вертикали
- horizontal— разрешает изменение размера по горизонтали
