How to Disable the Resizing of the <textarea> Element?
Webkit-based browsers such as Chrome, Safari, have attached a new UI element to the bottom-right of text areas allowing the user to resize the textarea size just by clicking it and moving the mouse.
As we know, WebKit has a privilege over other browsers in page control and CSS features. One of these “hidden” features is the possibility to regulate the textarea resizing. Firefox has provided the same feature in Firefox 4.
How to control the textarea resizing with CSS3
In this article, we are going to learn how to make the HTML <textarea> element have a fixed, unchangeable size.
To prevent a text field from being resized, you can use the CSS resize property with its «none» value.
Add this piece of code to your textarea style:
After it you can use the height and width properties to define a fixed height and width for your <textarea> element.
Тег <textarea> HTML текстовая область, многострочное поле ввода
Тег <textarea> в HTML используется для создания многострочного поля для ввода, другими словами, текстовой области.
Текстовое поле для ввода, созданное с помощью тега <textarea> , не имеет ограничений по количеству вводимых символов.
Размеры textarea HTML регулируются с помощью атрибутов rows и cols . Атрибут тега <textarea> rows регулирует высоту области, задавая количество строк, выводимых на экран без прокрутки (скроллинга). Атрибут тега <textarea> cols регулирует ширину текстовой области, рассчитывается в пикселях, как средняя ширина символа, умноженная на значение атрибута.
По умолчанию изменять размер textarea можно растягивая текстовую область за правый нижний край. Если нужно сделать <textarea> фиксированного размера, следует использовать CSS-правило resize: none; . Это отключит возможность растягивать область ввода.
Тег <textarea> HTML является элементом формы. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
Синтаксис
Примеры использования <textarea> в HTML коде
HTML код текстовой области <textarea>
<textarea> с фиксированным размером (no resize textarea)
По умолчанию пользователь может изменять размер текстовой области <textarea> (растягивать область ввода за край).
Для того, чтобы запретить изменение размера <textarea> используйте CSS свойство resize . Значение none поставит запрет на изменение размеров текстовой области, как ширины, так и высоты.
Если необходимо, чтобы у textarea была фиксированная ширина, установите значение у CSS свойства resize в vertical, при этом высоту области можно будет изменить. Если нужно иметь возможность изменять ширину <textarea> при фиксированной высоте, используйте значения horizontal.
Отображение в браузере:
HTML код <textarea> с фиксированной шириной и высотой
Поддержка браузерами
| Тег | |||||
| <textarea> | Да | Да | Да | Да | Да |
Атрибуты тега textarea
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на текстовую область.
Определяет ширину текстовой области. Ширина области рассчитывается в пикселях как ширина символа, умноженная на значение этого атрибута. Значение приблизительно равняется количеству символов моноширинного шрифта, которые должны занимать полную строку в текстовой области.
Логический атрибут. Если указан, делает текстовую область неактивной.
Данные текстовой области, отмеченной этим атрибутом, не будут переданы на сервер при отправке формы. Также отключает возможность ввода текста в текстовую область.
Указывает на форму, к которой относится текстовая область. Используется, если <textarea> находится вне HTML кода формы.
Если текстовая область находится внутри тега <form>, то использовать атрибут form не нужно, текстовая область по умолчанию привязана к форме, внутри которой находится.
Определяет максимальное количество символов, которые пользователь может ввести в текстовую область. По умолчанию объем текста в текстовой области не ограничен.
Имя текстовой области. Используется при передаче данных формы на сервер. Значение (текст) текстовой области будет передано в переменной, имеющей имя, указанное в этом атрибуте.
Текст, который будет отображаться внутри текстовой области, когда она не заполнена текстом. Обычно это описание того, что должен ввести пользователь, либо пример заполнения.
Логический атрибут. Если указан, пользователь не сможет изменить значение (текст) в текстовой области. Используется для создания текстовых областей, доступных только для чтения.
Логический атрибут. Если указан, текстовая область будет определена как обязательная для заполнения. Форма не будет отправлена на сервер, если текстовая область не будет заполнена.
Заполнение контролируется браузером. При попытке отправить форму с незаполненной обязательной текстовой областью, браузеры обычно выводят на экран ошибку заполнения.
Определяет высоту текстовой области. В качестве значения необходимо указать количество строк, которые должны быть видны без прокрутки (скроллинга).
Определяет правила переноса строк:
Значение hard: символы переноса строки будут добавлены в конце каждой строки в текстовой области. Таким образом, введенный текст из текстовой области переданный на сервер будет иметь ширину не больше, чем ширина <textarea>. Для использования этого значения необходимо указать атрибут cols.
Значение soft: символы переноса ставятся там, где их ставил пользователь. Таким образом текст из текстовой области, переданный на сервер в дальнейшем сможет растягиваться под ширину тега-контейнера. Значение по умолчанию.
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.
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.