Как сделать чтобы textarea не растягивался

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.

Alt Text

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.

Как отключить функцию изменения размера для элемента <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».

Пример

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

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

В правом нижнем углу текстового поля <textarea> есть небольшой уголок (рис. 1) с помощью которого мышью можно изменить размеры поля.

Вид текстового поля

Рис. 1. Вид текстового поля

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

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

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

Решение

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *