Запретить изменять размер textarea

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», информация вводиться не в строку, а в столбец.

И по умолчанию – в нижнем правом углу этого поля есть небольшой уголок, который позволяет пользователю изменить размеры этого окна.

С одной стороны, это полезная функция, ведь пользователь при написании в это поле большого сообщения может изменить его размеры для того, что было визуально комфортнее воспринимать введенный текст, а с другой – не очень, так как из-за изменения размеров этого окна самим пользователем у вас может в прямом смысле «поехать» дизайн.

Поэтому в каких-то случаях нужно оградить пользователя от этой функции. Как именно – я сейчас расскажу.

Читайте также:  Игровая гарнитура red square

Как запретить изменение размеров textarea на CSS?

Поставленная задача на CSS решается очень просто. Для этого нужно воспользоваться свойством «resize»:

С другой стороны, если вы все же хотите оставить возможность «растягивания» поля – вы можете воспользоваться свойствами «max-width» и «max-height»:

В таком случае растягивание поля разрешено, но только до указанных размеров.

Как запретить изменение размеров textarea на jQuery?

На jQuery эти же задачи решаются с помощью метода «css». Для полного запрета изменения размеров:

И для частичного ограничения соответственно:

Если вдруг какой-то из способов вам показался непонятным – пишите об этом в комментариях.