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ć?

html css

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

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/

— Pączek
źródło

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

206

W CSS ...

textarea {
    resize: none;
}

— Jeff Parker
źródło

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

— Rami Jamleh
źródło

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.

— James Sumners
źródło

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

25

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

— Imtiaz Ali Baigal
źródło

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

— Jewgienij
źródło

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.

— Tak więc Wickramasinghe
źródło

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

— Webeng
źródło

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.

— Alireza
źródło

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

— Oriol
źródło

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;

— Peter Mortensen
źródło

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>

Rozwiń fragment kodu

— Ambuj Khanna
źródło

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

— Carlos de Jesus Baez
źródło

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

Możesz spróbować również z jQuery

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

— Santosh Khalse
źródło

3

Powinieneś użyć więcej jquery . Nie używasz go wystarczająco. :)

— Filip Savic

1

Jest to mem - np. „Powinieneś to całkowicie rzucić i wypróbować jQuery”. .

— Peter Mortensen

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

— Abk
źródło

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

— kaelds
źródło

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