Как отключить свойство изменения размера текстового поля?

avatar
user549757
8 марта 2011 в 16:15
1526436
18
2971

Я хочу отключить свойство изменения размера для textarea.

В настоящее время я могу изменить размер textarea, щелкнув нижний правый угол textarea и перетащив мышь. Как это отключить?

Enter image description here

Источник
random_user_name
23 ноября 2012 в 19:35
5

@JDIsaaks - кроме того, разрешение изменения размера в определенных ситуациях может нарушить макет и печать (важный аспект текущего критически важного проекта).

neminem
21 января 2015 в 17:20
14

Иногда вам действительно нужно текстовое поле без изменения размера. Например, в этом случае, когда вы (условно) конвертируете текстовое поле во что-то, что просто выглядит как метка. Очень странно иметь этикетку со случайным плавающим граббером в стороне.

superluminary
30 января 2020 в 13:37
6

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

Ответы (18)

avatar
Donut
8 марта 2011 в 16:17
3958

Следующее правило CSS отключает изменение размера для элементов textarea:

textarea {
  resize: none;
}

Чтобы отключить его для некоторых (но не всех) textarea s, есть пара опций.

Вы можете использовать атрибут 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, min-width и min-height.

Очень важно знать:

Это свойство ничего не делает, если свойство переполнения не является видимым, что является значением по умолчанию для большинства элементов. Обычно, чтобы использовать это, вам нужно установить что-то вроде overflow: scroll;

Цитата Сары Коуп, http://css-tricks.com/almanac/properties/r/resize/

Šime Vidas
8 марта 2011 в 16:31
0

Есть ли решение для Firefox, Opera и / или IE?

Donut
8 марта 2011 в 16:37
8

@ Šime IE и FF3 (и более ранние версии) не поддерживают изменение размера, поэтому решение для них не требуется. Для FF4 это решение должно работать.

Jon Hulka
17 ноября 2012 в 20:23
30

согласно davidwalsh.name/textarea-resize - используйте resize: vertical или resize: horizontal, чтобы ограничить изменение размера одним измерением. Или используйте любую из max-width, max-height, min-width и min-height.

Buksy
8 августа 2016 в 13:15
6

Я единственный, кто считает странным устанавливать это с помощью css, а не атрибутов? Почему я не могу установить отключенные или проверенные или другие свойства с помощью CSS ...

Kroltan
8 сентября 2016 в 13:01
9

@Buksy Потому что "отключено" - это состояние, а не визуальное свойство. Таким образом, логично, что это не должно определяться языком стилей .

Carlos de Jesus Baez
6 февраля 2020 в 13:24
0

В этом решении нет лучших практик. Вы можете сделать это с помощью свойства MVC. @ Html.TextAreaFor (model => model.YourProperty, new {@style = "width: 90%; height: 180px; resize: none;"})

Dabananda Mitra
17 мая 2021 в 16:33
0

Большое вам спасибо, сэр. Ваше решение мне помогло.

avatar
Priya Maheshwari
16 августа 2021 в 07:22
0

Используйте это свойство resize: none;

textarea {
  resize: none;
}
avatar
Ismoil Shokirov
21 июля 2021 в 09:38
0
textarea {
  resize: none;
}

Приведенный выше код отключит свойство изменения размера всех элементов <textarea/> в вашем проекте. Если вы хотите, чтобы это было нормально, в противном случае вам нужно было бы использовать определенный класс для своих элементов textarea.

 .not-resizable {
    resize: none;
 }  

В вашем HTML

<textarea class="not-resizable"></textarea>
avatar
Ambuj Khanna
13 июня 2019 в 05:18
4

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

.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>
avatar
Carlos de Jesus Baez
30 августа 2018 в 16:00
3

С помощью @style вы можете задать ему нестандартный размер и отключить функцию изменения размера (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
Baptiste Mille-Mathias
30 августа 2018 в 16:33
2

Здравствуйте, спасибо за ответ, в следующий раз отформатируйте код.

yogihosting
27 декабря 2018 в 15:23
0

Это ответ на основе asp.net MVC. Очень хорошо.

avatar
user7122338
28 мая 2018 в 07:09
7

Вы можете просто отключить свойство textarea следующим образом:

textarea {
    resize: none;
}

Чтобы отключить вертикальное или горизонтальное изменение размера, используйте

resize: vertical;

или

resize: horizontal;
avatar
Alireza
1 июня 2017 в 13:11
9

Вы просто используете: resize: none; в своем CSS.

Свойство resize указывает, можно ли изменять размер элемента пользователем.

Примечание: Свойство изменения размера применяется к элементам, для которых вычисленное переполнение значение отличается от "видимого".

Также изменение размера в настоящее время не поддерживается в Internet Explorer.

Вот различные свойства для изменения размера:

Без изменения размера:

textarea {
  resize: none;
}

Изменение размера в обоих направлениях (по вертикали и горизонтали):

textarea {
  resize: both;
}

Изменить размер по вертикали:

textarea {
  resize: vertical;
}

Изменить размер по горизонтали:

textarea {
  resize: horizontal;
}

Также, если у вас есть width и height в вашем CSS или HTML, это предотвратит изменение размера вашего текстового поля с более широкой поддержкой браузеров.

avatar
Santosh Khalse
15 декабря 2016 в 08:08
0

Вы также можете попробовать с jQuery

$('textarea').css("resize", "none");
Filip Savic
25 июня 2018 в 10:01
3

Вам следует использовать больше jquery. Вы недостаточно его используете. :)

Peter Mortensen
26 сентября 2019 в 09:38
1

Это мем - например, «Вам следует полностью отказаться от этого и попробовать jQuery.» .

avatar
Abk
25 октября 2016 в 08:19
3

Чтобы отключить изменение размера для всех textarea s:

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;
}
avatar
Webeng
12 июня 2016 в 10:43
8

Чтобы отключить свойство изменения размера, используйте следующее свойство CSS:

resize: none;
  • Вы можете применить это как свойство встроенного стиля, например:

    <textarea style="resize: none;"></textarea>
    
  • или между <style>...</style> тегами элементов, например:

    textarea {
        resize: none;
    }
    
avatar
Oriol
30 октября 2015 в 23:26
5

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 */

См. Демонстрацию

avatar
Thusitha Wickramasinghe
21 июля 2015 в 05:18
17

Это легко сделать в HTML:

<textarea name="textinput" draggable="false"></textarea>

У меня это работает. Значение по умолчанию - true для атрибута draggable.

Antony D'Andrea
8 сентября 2015 в 15:11
0

Это атрибут HTML 5, поэтому его поддерживают только новые браузеры. Я где-то читал, что IE поддерживает его с 9 и далее.

Thusitha Wickramasinghe
9 ноября 2015 в 11:04
5

Это работает в большинстве браузеров. в каждом последнем браузере.

Mishko Vladimir
27 декабря 2016 в 18:14
0

это не помешает изменению размера текстового поля

Advait Junnarkar
20 февраля 2020 в 01:46
3

@ AntonyD'Andrea Это не работает в последней версии Chrome: jsfiddle.net/ps2v8df9

avatar
yevgeniy
12 февраля 2015 в 12:14
23

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

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;
}
MacroMan
17 июля 2015 в 09:55
7

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

avatar
kaelds
3 февраля 2014 в 19:07
0

Добавление !important заставляет его работать:

width:325px !important; height:120px !important; outline:none !important;

outline просто для того, чтобы избежать синего контура в некоторых браузерах.

Raptor
5 апреля 2016 в 03:44
6

Не злоупотребляйте атрибутом !important. Бессмысленно исправлять ширину и высоту, если атрибут CSS resize: none может удалить функцию изменения размера

Peter Mortensen
26 сентября 2019 в 09:30
1

Разве !important не зло?

Advait Junnarkar
20 февраля 2020 в 01:56
0

В текущем Chrome это останавливает изменение размера по горизонтали, но я все еще могу изменять размер текстового поля по вертикали.

EPurpl3
8 июля 2020 в 07:16
0

В некоторых редких случаях это может быть полезно.

avatar
Imtiaz Ali Baigal
6 ноября 2013 в 09:19
29
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
avatar
Rami Jamleh
27 декабря 2012 в 20:58
120

Я обнаружил две вещи:

Первый

textarea{resize: none}

Это CSS 3, , который еще не выпущен , совместим с Firefox 4 (и более поздними версиями), Chrome и Safari . <305749007>. <305749007

Еще одна функция формата - overflow: auto, чтобы избавиться от правой полосы прокрутки с учетом атрибута dir <49>

Код и разные браузеры

Базовый HTML

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <textarea style="overflow:auto;resize:none" rows="13" cols="20"></textarea>
</body>
</html>

Некоторые браузеры

  • Internet Explorer 8

Enter image description here

  • Firefox 17.0.1

Enter image description here

  • Хром

Enter image description here

avatar
James Sumners
8 марта 2011 в 16:35
68

CSS 3 имеет новое свойство для элементов пользовательского интерфейса, которое позволяет вам это делать. Свойство - это свойство изменения размера . Таким образом, вы должны добавить в свою таблицу стилей следующее, чтобы отключить изменение размера всех элементов textarea:

textarea { resize: none; }

Это свойство CSS 3; используйте диаграмму совместимости , чтобы увидеть совместимость браузера.

Лично меня очень раздражает отключение изменения размера элементов textarea. Это одна из тех ситуаций, когда дизайнер пытается «сломать» клиента пользователя. Если ваш дизайн не может вместить текстовое поле большего размера, вы можете пересмотреть, как работает ваш дизайн. Любой пользователь может добавить textarea { resize: both !important; } в свою таблицу стилей, чтобы переопределить ваши предпочтения.

Redwolf Programs
15 апреля 2019 в 12:35
1

Но это был бы пользователь , намеренно нарушивший их макет, а не пользователь, которому просто нужно изменить размер своего texarea и в итоге что-то не работает.

avatar
Jeff Parker
8 марта 2011 в 16:17
229

В CSS ...

textarea {
    resize: none;
}