Вопрос:

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

html css

1197362 просмотра

17 ответа

12250 Репутация автора

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

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

введите описание изображения здесь

Автор: user549757 Источник Размещён: 08.03.2011 04:15

Ответы (17)


3178 плюса

79575 Репутация автора

Решение

Следующее правило 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/

Автор: Donut Размещён: 08.03.2011 04:17

195 плюса

6478 Репутация автора

В CSS ...

textarea {
    resize: none;
}
Автор: Jeff Parker Размещён: 08.03.2011 04:17

62 плюса

11390 Репутация автора

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

textarea { resize: none; }

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

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

Автор: James Sumners Размещён: 08.03.2011 04:35

99 плюса

1342 Репутация автора

Я нашел 2 вещи

первый

textarea{resize:none}

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

Еще одна особенность формата - переполнение: автоматическое избавление от правильной полосы прокрутки с учетом атрибута dir

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

Основной HTML

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

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

  • IE8

введите описание изображения здесь

  • FF 17.0.1

введите описание изображения здесь

  • хром

введите описание изображения здесь

Автор: Rami Jamleh Размещён: 27.12.2012 08:58

22 плюса

241 Репутация автора

<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
Автор: Imtiaz Ali Baigal Размещён: 06.11.2013 09:19

0 плюса

121 Репутация автора

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

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

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

Автор: kaelds Размещён: 03.02.2014 07:07

20 плюса

508 Репутация автора

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

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;
}
Автор: yevgeniy Размещён: 12.02.2015 12:14

11 плюса

541 Репутация автора

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

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

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

Автор: Thusitha Wickramasinghe Размещён: 21.07.2015 05:18

3 плюса

4250 Репутация автора

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

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

Автор: Oriol Размещён: 30.10.2015 11:26

5 плюса

5600 Репутация автора

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

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

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

    textarea {
        resize: none;
    }
    
Автор: Webeng Размещён: 12.06.2016 10:43

0 плюса

959 Репутация автора

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

textarea {
    resize: none;
}

Чтобы отключить изменение размера для определенного textarea добавьте атрибут nameили a 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;
}
Автор: Abk Размещён: 25.10.2016 08:19

0 плюса

6404 Репутация автора

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

$('textarea').css("resize", "none");
Автор: Santosh Khalse Размещён: 15.12.2016 08:08

6 плюса

56793 Репутация автора

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

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

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

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

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

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

textarea { 
  resize: none; 
}

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

textarea { 
  resize: both; 
}

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

textarea { 
  resize: vertical; 
}

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

textarea { 
  resize: horizontal; 
}

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

Автор: Alireza Размещён: 01.06.2017 01:11

3 плюса

80 Репутация автора

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

textarea{
    resize: none;
}

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

resize: vertical;

или же

resize: horizontal;
Автор: Ashraful Размещён: 28.05.2018 07:09

1 плюс

516 Репутация автора

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

#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>

Автор: Rafiqul Islam Размещён: 05.07.2018 09:59

1 плюс

111 Репутация автора

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

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
Автор: Carlos de Jesus Baez Размещён: 30.08.2018 04:00

0 плюса

366 Репутация автора

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

.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>

Автор: Ambuj Khanna Размещён: 13.06.2019 05:18
Вопросы из категории :
32x32