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

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

Сделать, чтобы размеры текстового поля созданного через тег не изменялись при помощи мыши.

Решение

В современных браузерах Firefox, Safari и Chrome в правом нижнем углу текстового поля есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля.

Рис. 1. Вид текстового поля в браузере Chrome

Вид уголка различается, но его функции остаются одинаковыми, если щёлкнуть мышью и потянуть за уголок, то можно изменить размеры поля. Чтобы запретить эту возможность, следует для селектора textarea задать свойство resize со значением none (пример 1).

Пример 1. Использование resize

HTML5 CSS3 IE Cr Op Sa Fx

Как для поля textarea HTML запретить изменение размера?

Иногда, при верстке сайта, в частности, при работе с контактными формами возникает необходимость в HTML запретить изменение размера textarea. Вызвать такую необходимость могут разные причины. Например, вы хотите убрать уголок-индикатор, позволяющий растянуть текстовое поле из правого нижнего угла:

Или же вы хотите ограничить возможности пользователя по изменению размера поля textarea по горизонтали или по вертикали, для того, что бы сохранить верстку от нежелательных искажений:

Для поля textarea HTML запретить изменение размера можно несколькими способами.

Как в HTML полностью запретить изменение размера textarea?

Если вы хотите полностью заблокировать изменение размера текстового поля textarea, а так же убрать уголок-индикатор, то наиболее эффективным будет использование свойства resize со значением none.

. wpcf7 . wpcf7 — textarea < resize : none ;

Как видите, уголок-индикатор исчез, и для пользователя нет возможности растянуть поле.

Как для textarea HTML запретить изменение размера в одном направлении?

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

В таком случае было бы намного разумнее для textarea HTML запретить изменение размера, в зависимости от верстки, только в одном направлении. Например, в моем случае, при растягивании поля по ширине, поле уходит за пределы формы, и это существенно портит внешний вид. Но если растянуть поле в низ, то с версткой ничего страшного не произойдет, просто форма станет немного больше по высоте, и в тоже время, для пользователя будет намного удобнее вводить текст:

Чтобы добиться такого результата, нам нужно задать для свойства resize одно из этих значений:

• vertical – разрешает изменение размера текстового поля по вертикали
• horizontal— разрешает изменение размера по горизонтали

Как отключить функцию изменения размера для элемента ?

Браузеры на основе Webkit, такие как Safari Chrome, добавили новый UI элемент к правой нижней части текстовой области, позволяя пользователям изменить размер текстовой области простым нажатием мыши.

Не секрет, что WebKit имеет преимущество над другими браузерами в вопросе управления страницами и CSS функций. Одна из таких скрытых функций — это возможность регулирования размера текстовой области. Firefox дает такую же возможность в Firefox 4.

Если по каким-либо причинам вам необходимо удалить функцию изменения размера вашей текстовой области, CSS3 дает такую возможность контролирования.

В этой статье вы научитесь, как сделать, чтобы HTML элемент имел фиксированный неизменяемый размер.

Для того, чтобы размер текстового поля не изменился, можно использовать CSS свойство resize со значением «none».

Добавьте этот отрывок кода в ваш стиль текстовой области:

textarea < resize: none; >

После этого можно использовать свойства height и width для установления фиксированной высоты и ширины (height и width) для вашего элемента текстовой области.

Пример

html> html> head> title>Заголовок документа title> style> .comment < resize: none; height: 100px; width: 350px; > style> head> body> h2>Текстовая область с фиксированной шириной и высотой h2> form> textarea class="comment">Отправьте автору ваши комментарии textarea>br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

Или можно задать размер элемента с помощью установления атрибутов cols и rows , которые указывают фиксированное количество колонок и строк.

Пример

html> html> head> title>Заголовок документа title> style> .comment < resize: none; > style> head> body> form> textarea class="comment" rows="10" cols="40">Отправьте автору ваши комментарии. textarea>br> input type="submit" name="submitInfo" value="Submit"> form> body> html>

Можно также разрешить пользователям изменить размер элемента только по горизонтали и вертикали с помощью свойства resize со значением «vertical» или «horizontal».

Пример

html> html> head> title>Заголовок документа title> style> .vertical < resize: vertical; > .horizontal < resize: horizontal; > style> head> body> h2>Измените размер текстовой области только по вертикали h2> form> textarea class="vertical" rows="8" cols="50">Отправьте автору ваши комментарии. textarea> h2>Измените размер текстовой области только по горизонтали h2> textarea class="horizontal" rows="8" cols="50">Отправьте автору ваши комментарии. textarea> form> body> html>

Изменение размера текстовой области очень полезно, когда вам необходимо печатать длинное сообщение. Конечно, иногда для сохранения дизайна вам может понадобиться отключить функцию изменения размера текстовой области. Но будет лучше разрешить изменение размера элемента.

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

Тэг TextArea — незаменимое поле ввода для текста. Современные браузеры по-умолчанию позволяют пользователям изменять размеры, растягивать его за правый нижний угол. Сделано это с добрыми намерениями, но для верстальщика оборачивается не самыми приятными последствиями.

Вот пример формы, где разрешено изменение

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

Запретить изменение размера TEXTAREA

Первая мысль — это полный запрет изменения размера. Достаточно добавить стиль: