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

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

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

Ответ 1

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

textarea {
  resize: none;
}

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

Чтобы отключить определенную 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 не является чем-то отличным от visible, которое используется по умолчанию для большинства элементов. В общем, чтобы использовать это, вам нужно установить что-то вроде переполнения: scroll;

Цитата Криса Койера, http://css-tricks.com/almanac/properties/r/resize/

Ответ 2

В CSS...

textarea {
    resize: none;
}

Ответ 3

Я нашел две вещи:

Во-первых

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

Chrome

Ответ 4

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

textarea { resize: none; }

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

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

Ответ 5

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>

Ответ 6

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

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;
}

Ответ 7

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

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

Это работает для меня. Значением по умолчанию является true для атрибута draggable.

Ответ 8

Чтобы отключить свойство resize, используйте следующее свойство CSS:

resize: none;

Вы можете применить это как свойство встроенного стиля следующим образом:
```
<textarea style="resize: none;"></textarea>
```
или между тегами элемента <style>...</style> примерно так:
```
textarea {
    resize: none;
}
```

Ответ 9

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

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

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

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

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

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

textarea {
  resize: none;
}

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

textarea {
  resize: both;
}

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

textarea {
  resize: vertical;
}

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

textarea {
  resize: horizontal;
}

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

Ответ 10

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

Посмотреть демо

Ответ 11

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

textarea {
    resize: none;
}

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

resize: vertical;

или

resize: horizontal;

Ответ 12

Вы можете сделать это, используя свойство css resize.

textarea {
   resize: none;
}

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

textarea { resize: vertical; }

textarea { resize: horizontal; }

Наконец, resize: both разрешает захват размера.

Ответ 13

Попробуйте это:

#foo {
    resize: none;
}

<textarea rows="4" cols="50" name="foo" id="foo">
    Minisoft is the best website and software development company providing various IT services to individual and corporate clients globally. http://minisoft.com.bd
</textarea>

Ответ 14

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

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })

Ответ 15

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

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

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

Ответ 16

Чтобы отключить изменение размера для всех 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;
}

Ответ 17

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

$('textarea').css("resize", "none");

Ответ 18

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

Добавьте этот простой кусок кода к вашему стилю textarea:

 textarea {
  resize: none;
}

Смотрите другие примеры здесь. Как отключить изменение размера элемента <textarea>?

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .vertical { 
      resize: vertical; 
      }
      .horizontal { 
      resize: horizontal; 
      }
    </style>
  </head>
  <body>
    <h2>Resize the textarea only vertically</h2>
    <form>
      <textarea class="vertical" rows="8" cols="50">Send your comments to the author.</textarea>
      <h2>Resize the textarea only horizontally</h2>
      <textarea class="horizontal" rows="8" cols="50">Send your comments to the author.</textarea>
    </form>
  </body>
</html>

Ответ 19

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

.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 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 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 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 De Finibus Bonorum et Malorum for use in a type specimen book.
</textarea>

Ответ 20

Вы можете использовать следующее в вашем CSS:

textarea{resize:none}