Pytanie Jak wyłączyć resize właściwość textarea?


Chcę wyłączyć resizable właściwość textarea.

Obecnie mogę zmienić rozmiar pliku textarea klikając w prawym dolnym rogu ekranu textarea i przeciągając mysz. Jak mogę to wyłączyć?


2162
2018-03-08 16:15


pochodzenie


@JDIsaacks. Nie zgadzam się. To tak, jakby powiedzieć, że bardzo łatwo jest użytkownikowi usunąć niestandardowe style z pól tekstowych i przycisków. To moja strona i to mój projekt. Nie chcę, żeby wyglądał jak windows / mac / etc, chcę, żeby wyglądał jak MOJA aplikacja / strona. - Paul Fleming
@JDIsaaks - dalej, pozwalając zmienić rozmiar w niektórych sytuacjach może przerwać układ i drukowanie (ważny aspekt bieżącego projektu krytycznego dla misji). - cale_b
Czasami naprawdę potrzebujesz nieodkształcalnego obszaru tekstowego. Na przykład w tym przypadku, gdy (warunkowo) konwertujesz tekst na coś, co wygląda jak etykieta. Naprawdę dziwnie wygląda etykieta z losowo pływającym chwytakiem z boku. - neminem
@Gherman Moim zdaniem projektowanie oprogramowania jest jednym z najwyższych poziomów formy artystycznej, a twoja analogia w książce nie ma żadnego sensu. - quemeful


Odpowiedzi:


Następująca zasada CSS wyłącza zmianę rozmiaru dla textarea elementy:

textarea {
  resize: none;
}

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

Aby wyłączyć określony textarea z name atrybut ustawiony na foo (to znaczy., <textarea name="foo"></textarea>):

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

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

#foo {
  resize: none;
}

The Strona W3C zawiera listę możliwych wartości dla zmiany rozmiaru ograniczeń: brak, oba, poziomy, pionowy i dziedziczą:

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

Przejrzyj przyzwoite strona kompatybilności aby sprawdzić, które przeglądarki obsługują obecnie tę funkcję. Jak skomentował Jon Hulka, wymiary mogą być dalej powściągliwy w CSS przy użyciu max-width, max-height, min-width i min-height.

Bardzo ważne, aby wiedzieć:

Ta właściwość nie robi nic, chyba że właściwość przepełnienia jest inna niż widoczna, co jest domyślną cechą większości elementów. Więc ogólnie rzecz biorąc, aby to zrobić, musisz ustawić coś w rodzaju przepełnienia: przewiń;

Cytuj: Chris Coyier,    http://css-tricks.com/almanac/properties/r/resize/


2872
2018-03-08 16:17



Czy istnieje rozwiązanie dla przeglądarki Firefox, Opera i / lub IE? - Šime Vidas
@ Šime IE i FF3 (i wcześniej) nie dodają zmiany rozmiaru wsparcia, więc rozwiązanie dla nich nie jest potrzebne. W przypadku FF4 to rozwiązanie powinno działać. - Donut
zgodnie z davidwalsh.name/textarea-resize - użyj zmiany rozmiaru: pionowa lub zmiana rozmiaru: pozioma, aby ograniczyć zmianę rozmiaru do jednego wymiaru. Lub użyj dowolnej z max-width, max-height, min-width i min-height. - Jon Hulka
Czy tylko ja uważam za dziwne ustawienie tego przy użyciu css, a nie atrybutów? Dlaczego nie mogę ustawić wyłączonych lub zaznaczonych lub innych właściwości przy użyciu CSS ... - Buksy
@Buksy Ponieważ "wyłączony" to stan, a nie własność wizualna. W związku z tym logiczne jest, że nie powinno być rozstrzygane przez a stylizacja język. - Kroltan


W CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



Osobiście lubię tę odpowiedź lepiej. Do momentu. - quemeful


Znalazłem 2 rzeczy

pierwszy

textarea{resize:none}

to jest css3 który jeszcze nie został wydany zgodny z Firefox4 + chrome i safari 

inną funkcją formatu jest przepełnienie: auto pozbyć się prawego paska przewijania reż atrybut

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

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • chrom

enter image description here


91
2017-12-27 20:58





CSS3 ma nową propozycję elementów UI, które pozwolą ci to zrobić. Właściwość jest zmień właściwość. Aby dodać zmianę rozmiaru wszystkich elementów textarea, należy dodać do arkusza stylów:

textarea { resize: none; }

To jest właściwość CSS3; użyć tabela kompatybilności aby zobaczyć kompatybilność przeglądarki.

Osobiście uważam za bardzo denerwujące, gdy zmiana rozmiaru jest wyłączona na elementach textarea. Jest to jedna z sytuacji, gdy projektant próbuje "zepsuć" klienta użytkownika. Jeśli Twój projekt nie może pomieścić większego obszaru tekstowego, możesz zastanowić się, jak działa Twój projekt. Każdy użytkownik może dodać textarea { resize: both !important; } do arkusza stylów użytkownika, aby zastąpić preferencje.


57
2018-03-08 16:35





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

19
2017-11-06 09:19





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

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



Użyj również resize:none z tym rozwiązaniem, aby zapobiec pojawianiu się rączki w dolnym rogu, co frustrująco nie działa. - MacroMan


Można to zrobić w języku html

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

To działa dla mnie. Domyślna wartość to true dla draggable atrybut.


9
2017-07-21 05:18



Jest to atrybut HTML 5, więc będą obsługiwane tylko nowsze przeglądarki. Czytam gdzieś IE wspiera od 9 lat. - Antony D'Andrea
Działa to w większości przeglądarek. w każdej najnowszej przeglądarce. - Thusitha Wickramasinghe
nie zapobiegnie to zmianie rozmiaru textarea - Mishko Vladimir