Питання Як вимкнути змінні властивість textarea?


Я хочу вимкнути змінюваний розмір a textarea.

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


2162
2018-03-08 16:15


походження


@ JDIsaacks. Я не погоджуюсь. Схоже, сказати, що користувачеві дуже легко видалити власні стилі з текстових слів і кнопок. Це мій сайт, і це моя конструкція. Я не хочу, щоб це виглядало як windows / mac / etc, я хочу, щоб це виглядало як моє додаток / сайт. - Paul Fleming
@JDIsaaks - далі, дозволяючи змінювати розмір у певних ситуаціях, може зламати макет і друкувати (важливий аспект поточного критично важливого проекту). - cale_b
Іноді ви дійсно хочете мати незмінні текстові поля. Наприклад, у цьому випадку, коли ви (умовно) перетворюєте текстову область на те, що просто виглядає як мітка. Це виглядає дуже дивно, якщо мати етикетку з випадковим плаваючим захопленням у бік. - neminem
@Gherman На мій погляд розробка програмного забезпечення є одним з найвищих рівнів художньої форми, і ваша аналогія книги не має ніякого сенсу. - quemeful


Відповіді:


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

The Сторінка W3C перераховує можливі значення для обмежень щодо зміни розміру: ні, як горизонтальні, так і вертикальні, і успадковують:

textarea {
  resize: vertical; /* user can resize vertically, but width is fixed */
}

Огляньте пристойний сторінка сумісності щоб побачити, які веб-переглядачі наразі підтримують цю функцію. Як прокоментував Джон Гулка, розміри можуть бути далі стримується в CSS з використанням max-ширини, макс-висоти, міні-ширини і міні-висоти.

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

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

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


2872
2018-03-08 16:17



Чи є рішення для Firefox, Opera та / або IE? - Šime Vidas
@ Šime IE та FF3 (і раніше) не додають зміну розміру підтримки, тому для них рішення не потрібне. Для FF4 це рішення має працювати. - Donut
згідно davidwalsh.name/textarea-resize - змінити розмір використання: вертикальний або змінити розмір: горизонтальний, щоб обмежити зміну розміру до одного розміру. Або використовуйте будь-яку максимальну ширину, максимальну висоту, міні-ширину та міні-висоту. - Jon Hulka
Я єдиний, хто вважає себе дивним, щоб встановити це, використовуючи CSS, а не атрибути? Чому я не можу встановити вимкнений чи позначений або інші властивості, використовуючи CSS ... - Buksy
@Buksy Оскільки "disabled" - це стан, а не візуальна властивість. Таким чином, логічно, що це не повинно вирішуватися а стиль мова. - Kroltan


У CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



Мені особисто більше подобається ця відповідь. До речі. - quemeful


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

перший

textarea{resize:none}

це css3 який ще не випущений сумісний з Firefox4 + хром і сафарі 

інший формат є переповнення: авто щоб позбутися правильної смуги прокрутки з урахуванням реж атрибут

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

Основний 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

  • хром

enter image description here


91
2017-12-27 20:58





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

textarea { resize: none; }

Це властивість CSS3; використовувати a діаграма сумісності щоб побачити сумісність браузера.

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


57
2018-03-08 16:35





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

19
2017-11-06 09:19





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

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

18
2018-02-12 12:14



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


Це можна зробити в html просто

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

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


9
2017-07-21 05:18



Це атрибут HTML 5, тому підтримуються лише новіші браузери. Я читав десь IE підтримує його з 9 років. - Antony D'Andrea
Це працює в більшості браузерів. в кожному новому браузері. - Thusitha Wickramasinghe
це не заважатиме змінювати розмір тексту - Mishko Vladimir


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

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

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

Також змінити розмір На даний момент IE не підтримується.

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

Немає розміру:

textarea { 
  resize: none; 
}

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

textarea { 
  resize: both; 
}

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

textarea { 
  resize: vertical; 
}

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

textarea { 
  resize: horizontal; 
}

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


4
2018-06-01 13:11





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

resize: none;
  • Ви можете застосувати це як властивість вбудованого стилю так:

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

    textarea {
        resize: none;
    }
    

4
2018-06-12 10:43