Jak wyłączyć właściwość textarea o zmiennym rozmiarze?


2648

Chcę wyłączyć właściwość o zmiennym rozmiarze textarea.

Obecnie mogę zmienić rozmiar textarea, klikając prawy dolny róg textareai przeciągając myszą. Jak mogę to wyłączyć?

Wpisz opis zdjęcia tutaj


4
@JDIsaaks - ponadto, umożliwienie zmiany rozmiaru w niektórych sytuacjach może zepsuć układ i możliwości drukowania (ważny aspekt bieżącego projektu o kluczowym znaczeniu).
random_user_name

10
Czasami naprawdę potrzebujesz niezmienialnego obszaru tekstowego. Na przykład w tym przypadku, gdy (warunkowo) konwertujesz obszar tekstowy na coś, co wygląda jak etykieta. To naprawdę dziwne mieć etykietę z losowo unoszącym się grabberem z boku.
neminem

2
Z miłości do wszystkiego, co dobre, nie rób tego na prawdziwym obszarze tekstowym, w przeciwnym razie zrazisz swoich zaawansowanych użytkowników. Przełamywanie podstawowej funkcjonalności przeglądarki należy uznać za opcję nuklearną.
superluminarny

Odpowiedzi:


3530

Następująca reguła CSS wyłącza zmianę rozmiaru textareaelementów:

textarea {
  resize: none;
}

Aby wyłączyć tę textareafunkcję dla niektórych (ale nie wszystkich) opcji , istnieje kilka opcji .

Aby wyłączyć konkretny textareaz nameatrybutem ustawionym na foo(tj. <textarea name="foo"></textarea>):

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

Lub za pomocą idatrybutu (tj. <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

Strona W3C zawiera listę możliwych wartości ograniczeń zmiany rozmiaru: brak, zarówno poziomy, pionowy, jak i dziedziczony:

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

Przejrzyj stronę przyzwoitej zgodności, aby zobaczyć, które przeglądarki obsługują obecnie tę funkcję. Jak zauważył Jon Hulka, wymiary można dodatkowo ograniczyć w CSS, używając maksymalnej szerokości, maksymalnej wysokości, minimalnej szerokości i minimalnej wysokości.

Bardzo ważne, aby wiedzieć:

Ta właściwość nic nie robi, chyba że właściwość przepełnienia jest czymś innym niż widocznym, co jest wartością domyślną dla większości elementów. Ogólnie więc, aby z tego skorzystać, musisz ustawić coś takiego jak przepełnienie: przewiń;

Cytat Sary Cope, http://css-tricks.com/almanac/properties/r/resize/


Czy istnieje rozwiązanie dla przeglądarki Firefox, Opera i / lub IE?
Šime Vidas

6
@ Šime IE i FF3 (i wcześniejsze) nie dodają zmiany rozmiaru obsługi, więc rozwiązanie dla nich nie jest potrzebne. W przypadku FF4 to rozwiązanie powinno działać.
Donut

24
zgodnie z davidwalsh.name/textarea-resize - użyj resize: vertical lub resize: horizontal, aby ograniczyć rozmiar do jednego wymiaru. Lub użyj dowolnej z maksymalnej szerokości, maksymalnej wysokości, minimalnej szerokości i minimalnej wysokości.
Jon Hulka

3
Czy jestem jedynym, który uważa za dziwne ustawienie tego za pomocą css, a nie atrybutów? Dlaczego nie mogę wtedy ustawić wyłączonej lub sprawdzonej lub innych właściwości za pomocą CSS ...
Buksy

6
@Buksy Ponieważ „wyłączone” to stan, a nie właściwość wizualna. Dlatego logiczne jest, że język stylisty nie powinien o tym decydować .
Kroltan


105

Znalazłem dwie rzeczy:

Pierwszy

textarea{resize: none}

To jest CSS 3, który nie został jeszcze wydany , kompatybilny z Firefox 4 (i nowszymi), Chrome i Safari .

Inną funkcją formatu jest overflow: autopozbycie się prawego paska przewijania, biorąc pod uwagę atrybut dir .

Kod i różne przeglądarki

Podstawowy HTML

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

Niektóre przeglądarki

  • Internet Explorer 8

Wpisz opis zdjęcia tutaj

  • Firefox 17.0.1

Wpisz opis zdjęcia tutaj

  • Chrom

Wpisz opis zdjęcia tutaj


62

CSS 3 ma nową właściwość elementów interfejsu użytkownika, która pozwoli ci to zrobić. Właściwość jest właściwością zmiany rozmiaru . Więc dodaj do arkusza stylów następujące elementy, aby wyłączyć zmianę rozmiaru wszystkich elementów obszaru tekstowego:

textarea { resize: none; }

Jest to właściwość CSS 3; skorzystaj z tabeli kompatybilności, aby zobaczyć kompatybilność przeglądarki.

Osobiście uważałbym za bardzo denerwujące wyłączenie zmiany rozmiaru elementów textarea. Jest to jedna z sytuacji, w których projektant próbuje „złamać” klienta użytkownika. Jeśli Twój projekt nie może pomieścić większego obszaru tekstowego, możesz ponownie rozważyć sposób jego działania. Każdy użytkownik może dodać textarea { resize: both !important; }do swojego arkusza stylów użytkownika, aby zastąpić twoje preferencje.


Byłby to jednak użytkownik celowo przerywający układ, a nie użytkownik, który musi tylko zmienić rozmiar texareai kończy się tym, że coś nie działa
Redwolf Programs


21

Jeśli potrzebujesz głębokiego wsparcia, możesz użyć starej szkoły:

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
Użyj również resize:nonetego rozwiązania, aby zapobiec pojawianiu się uchwytu w dolnym rogu, co frustrująco nie działa.
MacroMan

13

Można to łatwo zrobić w HTML:

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

To działa dla mnie. Domyślną wartością jest truedla draggableatrybutu.


Jest to atrybut HTML 5, więc obsługiwane będą tylko nowsze przeglądarki. Czytałem gdzieś, że IE obsługuje to od 9 lat.
Antony D'Andrea

4
Działa to w większości przeglądarek. w każdej najnowszej przeglądarce.
Takitha Wickramasinghe

nie zapobiegnie zmianie rozmiaru textarea
Mishko Vladimir

@ AntonyD'Andrea To nie działa na najnowszym Chrome: jsfiddle.net/ps2v8df9
Advait Junnarkar

6

Aby wyłączyć właściwość zmiany rozmiaru, użyj następującej właściwości CSS:

resize: none;
  • Możesz zastosować to jako właściwość stylu wbudowanego, taką jak:

    <textarea style="resize: none;"></textarea>
  • lub pomiędzy <style>...</style>znacznikami elementów takimi jak:

    textarea {
        resize: none;
    }

6

Po prostu używasz: resize: none;w swoim CSS.

Zmiana rozmiaru określa, czy użytkownik może elementu.

Uwaga: Właściwość zmiany rozmiaru dotyczy elementów, których obliczona wartość przepełnienia jest czymś innym niż „widocznym”.

Również zmień rozmiar nie jest obecnie obsługiwana w Internet Explorerze.

Oto różne właściwości zmiany rozmiaru:

Bez zmiany rozmiaru:

textarea {
  resize: none;
}

Zmień rozmiar w obie strony (pionowo i poziomo):

textarea {
  resize: both;
}

Zmień rozmiar w pionie:

textarea {
  resize: vertical;
}

Zmień rozmiar w poziomie:

textarea {
  resize: horizontal;
}

Również jeśli masz widthi heightw swoim CSS lub HTML, zapobiegnie to zmianie rozmiaru twojego obszaru tekstowego, dzięki szerszej obsłudze przeglądarek.


3

CSS 3 może rozwiązać ten problem. Niestety jest obecnie obsługiwany tylko w 60% używanych przeglądarek .

W przeglądarce Internet Explorer i iOS nie można wyłączyć zmiany rozmiaru, ale można ograniczyć textareawymiar, ustawiając jego widthi height.

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

Zobacz demo


3

Możesz po prostu wyłączyć właściwość textarea w następujący sposób:

textarea {
    resize: none;
}

Aby wyłączyć zmianę rozmiaru w pionie lub w poziomie , użyj

resize: vertical;

lub

resize: horizontal;

2

Stworzyłem małe demo, aby pokazać, jak działa zmiana rozmiaru właściwości. Mam nadzieję, że to pomoże tobie i innym.

.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

Za pomocą @stylemożesz nadać mu niestandardowy rozmiar i wyłączyć funkcję zmiany rozmiaru (resize: none;).

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

1
Witam, dziękuję za odpowiedź, następnym razem sformatuj kod.
Baptiste Mille-Mathias

To jest odpowiedź oparta na asp.net MVC. Bardzo dobrze.
yogihosting


0

Aby wyłączyć zmianę rozmiaru dla wszystkich textareas:

textarea {
    resize: none;
}

Aby wyłączyć zmianę rozmiaru dla określonego textarea, dodaj atrybut namelub an idi ustaw go na coś. W tym przypadku jest nazwanynoresize

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

Dodanie !importantpowoduje, że działa:

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

outline jest po prostu unikanie niebieskiego konturu w niektórych przeglądarkach.


6
Nie nadużywaj !importantatrybutu. Nie ma znaczenia, aby naprawić szerokość i wysokość, jeśli atrybut CSS resize: nonemoże usunąć funkcję zmiany rozmiaru
Raptor

1
Czyż nie jest !importantzło?
Peter Mortensen

W obecnym Chrome ten rozmiar przestaje być zmieniany w poziomie, ale nadal mogę zmieniać rozmiar obszaru tekstowego w pionie.
Advait Junnarkar
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.