Я хочу отключить свойство изменения размера textarea.
В настоящее время я могу изменить размер textarea, щелкнув в правом нижнем углу textarea и перетащив мышь. Как я могу это отключить?
16 ответов
Следующее правило CSS отключает изменение размера для элементов textarea:
textarea {
resize: none;
}
Чтобы отключить его для некоторых (но не для всех) textarea, существует несколько вариантов.
Вы можете использовать атрибут class в своем теге (<textarea class="textarea1">):
.textarea1 {
resize: none;
}
Чтобы отключить определенный textarea с атрибутом name, установленным на foo (т. Е. <textarea name="foo"></textarea>):
textarea[name=foo] {
resize: none;
}
Или, используя атрибут id (т. Е. <textarea id="foo"></textarea>):
#foo {
resize: none;
}
На странице W3C перечислены возможные значения ограничений изменения размера: нет, оба, по горизонтали, вертикальный и наследовать:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Просмотрите достойную страницу совместимости, чтобы узнать, какие браузеры в настоящее время поддерживают эту функцию. Как прокомментировал Джон Халка, размеры можно дополнительно ограничить в CSS с помощью max-width, max-height, минимальная ширина и минимальная высота.
Очень важно знать:
Это свойство ничего не делает, если свойство переполнения не является видимым, что является значением по умолчанию для большинства элементов. Обычно, чтобы использовать это, вам нужно установить что-то вроде overflow: scroll;
Цитата Сары Коуп, http://css-tricks.com/almanac/properties/r/resize/
В CSS ...
textarea {
resize: none;
}
Я обнаружил две вещи:
Первый
textarea{resize: none}
Это CSS 3, который еще не выпущен , совместимый с Firefox 4 (и более поздние версии), Chrome и Safari .
Еще одна функция форматирования - overflow: auto, чтобы избавиться от правой полосы прокрутки. с учетом атрибута dir .
Код и разные браузеры
Базовый HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>
Некоторые браузеры
- Internet Explorer 8
- Firefox 17.0.1
- Хром
В CSS 3 есть новое свойство для элементов пользовательского интерфейса, которое позволит вам это сделать. Это свойство является свойством изменения размера. Таким образом, вы должны добавить в свою таблицу стилей следующее, чтобы отключить изменение размера всех элементов textarea:
textarea { resize: none; }
Это свойство CSS 3; используйте диаграмму совместимости, чтобы увидеть совместимость браузера.
Лично меня очень раздражает отключение изменения размера элементов textarea. Это одна из тех ситуаций, когда дизайнер пытается «сломать» клиента пользователя. Если ваш дизайн не может вместить текстовое поле большего размера, вы можете пересмотреть, как работает ваш дизайн. Любой пользователь может добавить textarea { resize: both !important; } в свою таблицу стилей, чтобы изменить ваши предпочтения.
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
Если вам нужна глубокая поддержка, вы можете использовать старый метод:
textarea {
max-width: /* desired fixed width */ px;
min-width: /* desired fixed width */ px;
min-height: /* desired fixed height */ px;
max-height: /* desired fixed height */ px;
}
Это легко сделать в HTML:
<textarea name="textinput" draggable="false"></textarea>
У меня это работает. Значение по умолчанию для атрибута draggable - true.
Вы просто используете: resize: none; в своем CSS.
Свойство resize указывает, можно ли изменять размер элемента. пользователем.
Примечание . Свойство resize применяется к элементам, для которых вычисленное переполнение значение - это нечто иное, чем "видимое".
Кроме того, изменение размера в настоящее время не поддерживается в Internet Explorer.
Вот различные свойства для изменения размера:
Без изменения размера:
textarea {
resize: none;
}
Измените размер в обоих направлениях (по вертикали и горизонтали) .
textarea {
resize: both;
}
Изменить размер по вертикали:
textarea {
resize: vertical;
}
Изменить размер по горизонтали .
textarea {
resize: horizontal;
}
Также, если у вас есть width и height в вашем CSS или HTML, это предотвратит изменение размера вашего текстового поля с более широкой поддержкой браузеров.
Чтобы отключить свойство изменения размера, используйте следующее свойство CSS:
resize: none;
Вы можете применить это как свойство встроенного стиля, например:
<textarea style="resize: none;"></textarea>или между тегами элементов
<style>...</style>, например:textarea { resize: none; }
Вы можете просто отключить свойство textarea следующим образом:
textarea {
resize: none;
}
Чтобы отключить вертикальное или горизонтальное изменение размера, используйте
resize: vertical;
Или
resize: horizontal;
CSS 3 может решить эту проблему. К сожалению, в настоящее время он поддерживается только в 60% используемых браузеров.
В Internet Explorer и iOS нельзя отключить изменение размера, но можно ограничить размер textarea, задав его width и height.
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
Я создал небольшую демонстрацию, чтобы показать, как работают свойства изменения размера. Надеюсь, это поможет вам и другим.
.resizeable {
resize: both;
}
.noResizeable {
resize: none;
}
.resizeable_V {
resize: vertical;
}
.resizeable_H {
resize: horizontal;
}<textarea class="resizeable" rows="5" cols="20" name="resizeable" title="This is Resizable.">
This is Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
<textarea class="noResizeable" rows="5" title="This will not Resizable. " cols="20" name="resizeable">
This will not Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
<textarea class="resizeable_V" title="This is Vertically Resizable." rows="5" cols="20" name="resizeable">
This is Vertically Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>
<textarea class="resizeable_H" title="This is Horizontally Resizable." rows="5" cols="20" name="resizeable">
This is Horizontally Resizable. Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>С помощью @style вы можете задать ему собственный размер и отключить функцию изменения размера (resize: none;).
@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
Чтобы отключить изменение размера для всех textarea:
textarea {
resize: none;
}
Чтобы отключить изменение размера для определенного textarea, добавьте атрибут, name или id и установите для него что-нибудь. В данном случае он называется noresize.
HTML
<textarea name='noresize' id='noresize'> </textarea>
CSS
/* Using the attribute name */
textarea[name=noresize] {
resize: none;
}
/* Or using the id */
#noresize {
resize: none;
}
Вы также можете попробовать с jQuery
$('textarea').css("resize", "none");
Добавление !important заставляет его работать:
width:325px !important; height:120px !important; outline:none !important;
outline - это просто, чтобы избежать синего контура в некоторых браузерах.
En Español