| 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— разрешает изменение размера по горизонтали
Textarea – это поле для ввода различной информации на вашем сайте, и, в отличие от похожего тега «input», информация вводиться не в строку, а в столбец.
И по умолчанию – в нижнем правом углу этого поля есть небольшой уголок, который позволяет пользователю изменить размеры этого окна.
С одной стороны, это полезная функция, ведь пользователь при написании в это поле большого сообщения может изменить его размеры для того, что было визуально комфортнее воспринимать введенный текст, а с другой – не очень, так как из-за изменения размеров этого окна самим пользователем у вас может в прямом смысле «поехать» дизайн.
Поэтому в каких-то случаях нужно оградить пользователя от этой функции. Как именно – я сейчас расскажу.
Как запретить изменение размеров textarea на CSS?
Поставленная задача на CSS решается очень просто. Для этого нужно воспользоваться свойством «resize»:
С другой стороны, если вы все же хотите оставить возможность «растягивания» поля – вы можете воспользоваться свойствами «max-width» и «max-height»:
В таком случае растягивание поля разрешено, но только до указанных размеров.
Как запретить изменение размеров textarea на jQuery?
На jQuery эти же задачи решаются с помощью метода «css». Для полного запрета изменения размеров:
И для частичного ограничения соответственно:
Если вдруг какой-то из способов вам показался непонятным – пишите об этом в комментариях.