Как отключить функцию изменения размера для элемента <textarea>?
Браузеры на основе Webkit, такие как Safari Chrome, добавили новый UI элемент к правой нижней части текстовой области, позволяя пользователям изменить размер текстовой области простым нажатием мыши.
Не секрет, что WebKit имеет преимущество над другими браузерами в вопросе управления страницами и CSS функций. Одна из таких скрытых функций — это возможность регулирования размера текстовой области. Firefox дает такую же возможность в Firefox 4.
Если по каким-либо причинам вам необходимо удалить функцию изменения размера вашей текстовой области, CSS3 дает такую возможность контролирования.
В этой статье вы научитесь, как сделать, чтобы HTML элемент <textarea> имел фиксированный неизменяемый размер.
Для того, чтобы размер текстового поля не изменился, можно использовать CSS свойство resize со значением «none».
Добавьте этот отрывок кода в ваш стиль текстовой области:
После этого можно использовать свойства height и width для установления фиксированной высоты и ширины (height и width) для вашего элемента текстовой области.
Пример
Или можно задать размер элемента <textarea> с помощью установления атрибутов cols и rows , которые указывают фиксированное количество колонок и строк.
Пример
Можно также разрешить пользователям изменить размер элемента <textarea> только по горизонтали и вертикали с помощью свойства resize со значением «vertical» или «horizontal».
Пример
Изменение размера текстовой области очень полезно, когда вам необходимо печатать длинное сообщение. Конечно, иногда для сохранения дизайна вам может понадобиться отключить функцию изменения размера текстовой области. Но будет лучше разрешить изменение размера элемента.
How do I disable the resizable property of a textarea?
I want to disable the resizable property of a textarea .
Currently, I can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse. How can I disable this?
20 Answers 20
The following CSS rule disables resizing behavior for textarea elements:
To disable it for some (but not all) textarea s, there are a couple of options.
You can use class attribute in your tag( <textarea >):
To disable a specific textarea with the name attribute set to foo (i.e., <textarea name="foo"></textarea> ):
Or, using an id attribute (i.e., <textarea >):
The W3C page lists possible values for resizing restrictions: none, both, horizontal, vertical, and inherit:
Review a decent compatibility page to see what browsers currently support this feature. As Jon Hulka has commented, the dimensions can be further restrained in CSS using max-width, max-height, min-width, and min-height.
Как для поля textarea HTML запретить изменение размера?
Иногда, при верстке сайта, в частности, при работе с контактными формами возникает необходимость в HTML запретить изменение размера textarea. Вызвать такую необходимость могут разные причины. Например, вы хотите убрать уголок-индикатор, позволяющий растянуть текстовое поле из правого нижнего угла:
Или же вы хотите ограничить возможности пользователя по изменению размера поля textarea по горизонтали или по вертикали, для того, что бы сохранить верстку от нежелательных искажений:
Для поля textarea HTML запретить изменение размера можно несколькими способами.
Как в HTML полностью запретить изменение размера textarea?
Если вы хотите полностью заблокировать изменение размера текстового поля textarea, а так же убрать уголок-индикатор, то наиболее эффективным будет использование свойства resize со значением none.
Как видите, уголок-индикатор исчез, и для пользователя нет возможности растянуть поле.
Как для textarea HTML запретить изменение размера в одном направлении?
Но такой вариант не всегда удобен, так как по умолчанию для текстового поля может быть задана слишком маленькая высота, и пользователю будет неудобно вводить текст в это поле:
В таком случае было бы намного разумнее для textarea HTML запретить изменение размера, в зависимости от верстки, только в одном направлении. Например, в моем случае, при растягивании поля по ширине, поле уходит за пределы формы, и это существенно портит внешний вид. Но если растянуть поле в низ, то с версткой ничего страшного не произойдет, просто форма станет немного больше по высоте, и в тоже время, для пользователя будет намного удобнее вводить текст:
Чтобы добиться такого результата, нам нужно задать для свойства resize одно из этих значений:
What is textarea?
The <textarea> element is often used in a form, to collect user inputs like comments or reviews.
A text area can hold an unlimited number of characters.
How to resize texarea?
You can resize a textarea by clicking on the bottom right corner of the textarea and dragging the mouse.
How to disable resizing textarea?
The following CSS rule disables resizing behavior for textarea elements:
Exit fullscreen mode
With above code all of your textareas will be disabled to resize.
You can use class attribute in your tag —
Exit fullscreen mode
Exit fullscreen mode
To disable a specific textarea with the name attribute set to foo
Exit fullscreen mode
Exit fullscreen mode
Or, using an id attribute —
Exit fullscreen mode
Exit fullscreen mode
This property does nothing unless the overflow property is something other than visible, which is the default for most elements. So generally to use this, you’ll have to set something like overflow: scroll ;
resize has below values that you can use with your text areas —
none: the element is not resizeable.
both: the user can resize the element’s height and/or width.
horizontal: the user can resize the element horizontally (increasing the width).
vertical: the user can resize the element vertically (increasing the height).
inherit: the element inherits the resize value of its parent.
Below is the demo where you can click on the value names and can see the demo of selected value version of textarea —
With all that being said, I highly recommend you keep learning!
Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.