Як відключити зміну властивості textarea?

2649

Я хочу відключити зміна властивості textarea.

В даний час я можу змінити розмір a textarea, натиснувши на нижній правий кут textareaі перетягнувши мишу. Як я можу відключити це?

html css

— user549757
джерело

4

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

— random_user_name

10

Іноді дуже хочеться змінити розмір тексту. Наприклад, у цьому випадку, коли ви (умовно) перетворюєте текстову область у щось, що просто схоже на мітку. Дуже дивно виглядає етикетка з випадковим плаваючим захопленням убік.

— neminem

2

Для любові до всього хорошого, будь ласка, не робіть цього на фактичних текстах, інакше ви відчужите своїх користувачів. Порушення основних функціональних можливостей браузера слід вважати ядерним варіантом.

— надсвітні

3531

Наступне правило 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.

Супер важливо знати:

Це властивість не робить нічого, якщо властивість переповнення є чимось відмінним від видимого, що є типовим для більшості елементів. Отже, щоб використовувати це, вам доведеться встановити щось на зразок переповнення: scroll;

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

— Пончик
джерело

Чи є рішення для Firefox, Opera та / або IE?

— Šime Vidas

6

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

— Пончик

24

відповідно до davidwalsh.name/textarea-resize - використовувати розмір: вертикальний або розмір: горизонтальний для обмеження зміни розміру на один вимір. Або використовувати будь-яку з максимальної ширини, максимальної висоти, мінімальної ширини та мінімальної висоти.

— Джон Хулка

3

Чи я єдиний, хто вважає дивним встановити це за допомогою css, а не атрибутів? Чому я не можу встановити вимкнений або перевірений або інші властивості за допомогою CSS ...

— Buksy

6

@Buksy Оскільки "інвалід" - це стан, а не візуальна властивість. Таким чином, логічно, що це не повинно визначатися мовою стилізації .

— Кролтан

206

У CSS ...

textarea {
    resize: none;
}

— Джефф Паркер
джерело

105

Я знайшов дві речі:

Спочатку

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

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

Хром

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

— Рамі Джамле
джерело

62

CSS 3 має нову властивість для елементів інтерфейсу, що дозволить вам це зробити. Властивість є власністю зміни розміру . Отже, ви додасте наступне до таблиці стилів, щоб відключити розмір усіх елементів текстових областей:

textarea { resize: none; }

Це властивість CSS 3; скористайтеся діаграмою сумісності, щоб побачити сумісність браузера.

Особисто мені буде дуже прикро, щоб змінити розмір на елементах textarea. Це одна з тих ситуацій, коли дизайнер намагається «зламати» клієнта користувача. Якщо ваш дизайн не може вмістити більшу текстову область, можливо, вам варто переглянути, як працює ваш дизайн. Будь-який користувач може додати textarea { resize: both !important; }до таблиці своїх стилів користувача, щоб змінити ваші налаштування.

— Джеймс Самнерс
джерело

Але це було б користувачеві навмисно порушувати їх макет, а не користувачеві, якому просто потрібно змінити розмір свого texareaі закінчити щось, що не працює

— Redwolf Programs

25

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

— Імтіаз Алі Байгал
джерело

21

Якщо вам потрібна глибока підтримка, ви можете використовувати стару шкільну техніку:

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

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

— MacroMan

13

Це можна зробити в HTML легко:

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

Це працює для мене. Значення за замовчуванням - trueдля draggableатрибута.

— Сукіта Віккрамісінгхе
джерело

Це атрибут HTML 5, тому підтримуватимуть лише новіші браузери. Я десь читав, що IE підтримує це з 9 і далі.

— Антоні Д'Андреа

4

Це працює в більшості браузерів. у кожному останньому веб-переглядачі.

— Сукіта Віккрамісінг,

це не завадить змінити розмір текстових областей

— Мішко Володимир

@ AntonyD'Andrea Це не працює на останньому Chrome: jsfiddle.net/ps2v8df9

— Advait Junnarkar

6

Щоб відключити властивість зміни розміру, використовуйте таке властивість CSS:

resize: none;

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

— Вебенг
джерело

6

Ви просто використовуєте: resize: none;у своєму CSS.

У Resize властивість визначає , є чи елемент є змінним користувачем.

Примітка: Властивість зміни розміру застосовується до елементів, обчислене значення переповнення яких є чимось відмінним від "видимого".

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

Ось різні властивості зміни розміру:

Без розміру:

textarea {
  resize: none;
}

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

textarea {
  resize: both;
}

Змініть розмір вертикально:

textarea {
  resize: vertical;
}

Змініть розмір по горизонталі:

textarea {
  resize: horizontal;
}

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

— Аліреза
джерело

3

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

Див. Демо

— Оріол
джерело

3

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

textarea {
    resize: none;
}

Для відключення вертикального чи горизонтального розміру використовуйте

resize: vertical;

або

resize: horizontal;

— Пітер Мортенсен
джерело

2

Я створив невелику демонстрацію, щоб показати, як працюють властивості зміни розміру. Сподіваюся, це допоможе і вам, і іншим.

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

Розгорніть фрагмент

— Амбуй Ханна
джерело

1

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

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

— Карлос де Ісус Беез
джерело

1

Привіт, дякую за вашу відповідь, наступного разу відформатуйте код.

— Батист Мілле-Матіас

Це відповідь, що базується на asp.net MVC. Дуже хороший.

— йогіхостінг

0

Ви також можете спробувати з jQuery

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

— Сантош Халсе
джерело

3

Вам слід використовувати більше jquery . Ви його недостатньо використовуєте. :)

— Філіп Савич

1

Це мем - наприклад, "Вам слід повністю скинути це та спробувати jQuery." .

— Пітер Мортенсен

0

Щоб вимкнути розмір для всіх textareas:

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

— Абк
джерело

-2

Якщо додавання, !importantце працює:

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

outline це просто уникати синього контуру на певних браузерах.

— полів
джерело

6

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

— Raptor

1

Хіба не !importantзло?

— Пітер Мортенсен

У поточному Chrome це зупиняється на горизонтальному розмірі, але я все ще можу змінити розмір текстової області вертикально.

— Адвайт Джунаркар