it-swarm.com.ru

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

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

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

enter image description here

2400
user549757

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

textarea {
  resize: none;
}

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

Чтобы отключить определенное textarea с атрибутом name, установленным в foo (то есть, <textarea name="foo"></textarea>):

textarea[name=foo] {
  resize: none;
}

Или, используя атрибут id (то есть, <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

В страница W3C перечислены возможные значения ограничений на изменение размера: none, оба, горизонтальные, вертикальные и наследовать:

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/

3179
Donut

В CSS ...

textarea {
    resize: none;
}
195
Jeff Parker

Я нашел 2 вещи

первый

textarea{resize:none}

это css3 который еще не выпущен совместим с Firefox4 + chrome и ​​сафари

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

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

Basic html

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

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

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • chrome

enter image description here

99
Rami Jamleh

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

textarea { resize: none; }

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

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

62
James Sumners
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
22
Imtiaz Ali Baigal

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

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

Это можно сделать в html легко

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

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

11
Thusitha Wickramasinghe

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

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

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

Также изменить размер не поддерживается в IE на данный момент.

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

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

textarea { 
  resize: none; 
}

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

textarea { 
  resize: both; 
}

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

textarea { 
  resize: vertical; 
}

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

textarea { 
  resize: horizontal; 
}

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

6
Alireza

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

resize: none;
  • Вы можете применить это как свойство встроенного стиля следующим образом:

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

    textarea {
        resize: none;
    }
    
5
Webeng

CSS3 может решить эту проблему. К сожалению, это поддерживается только в 60% используемых браузеров в настоящее время.

Для IE и ​​iOS вы не можете отключить изменение размера, но вы можете ограничить измерение textarea, установив его width и height.

/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */

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

3
Oriol

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

textarea{
    resize: none;
}

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

resize: vertical;

или же

resize: horizontal;
3
Ashraful

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

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

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

#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>
1
Rafiqul Islam

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

.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>
0
Ambuj Khanna

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

textarea {
    resize: none;
}

Чтобы отключить изменение размера для определенного textarea, добавьте атрибут name или id и задайте для него значение. В этом случае он называется noresize

<textarea name='noresize' id='noresize'> </textarea>

CSS

/*  using the attribute name */
textarea[name=noresize]{
resize: none;
}
/* or using the id */

#noresize{
resize: none;
}
0
Abk

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

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

Добавление! Важный заставляет его работать:

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

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

0
kaelds