Как убрать возможность растягивать textarea

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

Приветствую вас на сайте Impuls-Web!

Навигация по статье:

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

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

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

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

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

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

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

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

Источник

css textarea запрет на растягивание

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

Пользователи, которые используют браузеры Firefox, Google Chrome или Safari, знают, что новые версии этих браузеров позволяют изменять размер текстовых областей на сайте. То есть у них появляется уголок, за который можно потянуть и изменить размер textarea. До недавнего времени я думал, что избавиться от этого невозможно, но не так давно узнал, что всё-таки можно. Поэтому в этой статье я познакомлю Вас с тем, как запретить изменение размеров textarea.

Пусть у нас имеется следующий HTML-код:

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
4.0+12.10+5.0+4.0+1.0+

Задача

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

не изменялись при помощи мыши.

Решение

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

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

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

Приветствую вас на сайте Impuls-Web!

Навигация по статье:

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

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

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

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

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

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

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

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

Как убрать возможность растягивать textarea. Смотреть фото Как убрать возможность растягивать textarea. Смотреть картинку Как убрать возможность растягивать textarea. Картинка про Как убрать возможность растягивать textarea. Фото Как убрать возможность растягивать textarea

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

Источник

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

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