Jak wyłączyć właściwość zmiany rozmiaru pola textarea?
Chcę wyłączyć właściwość resizable textarea
.
Obecnie mogę zmienić rozmiar textarea
klikając w prawym dolnym rogu textarea
i przeciągając myszką. Jak mogę to wyłączyć?
17 answers
Następująca reguła CSS wyłącza zachowanie zmiany rozmiaru dla textarea
elementy:
textarea {
resize: none;
}
Aby wyłączyć go dla niektórych (ale nie wszystkich) textarea
S, istnieje kilka opcji .
Aby wyłączyć określone textarea
z atrybutem name
ustawionym na foo
(tj., <textarea name="foo"></textarea>
):
textarea[name=foo] {
resize: none;
}
Lub, używając atrybutu id
(tj., <textarea id="foo"></textarea>
):
#foo {
resize: none;
}
Strona W3C zawiera listę możliwych wartości dla ograniczeń zmiany rozmiaru: none, both, horizontal, vertical i dziedziczenie:
textarea {
resize: vertical; /* user can resize vertically, but width is fixed */
}
Przejrzyj przyzwoitą stronę zgodności , aby zobaczyć, które przeglądarki obecnie obsługują tę funkcję. Jak skomentował Jon Hulka, wymiary mogą być dodatkowo ograniczone w CSS używając max-width, max-height, min-width i min-height.
Super ważne, aby wiedzieć:
Ta właściwość nic nie robi, chyba że właściwość overflow jest czymś innym niż visible, co jest domyślne dla większości elementów. Więc ogólnie, aby użyć tego, będziesz trzeba ustawić coś takiego jak overflow: scroll;
Cytat: Sara Cope, http://css-tricks.com/almanac/properties/r/resize/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-22 15:32:32
W CSS ...
textarea {
resize: none;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-03-08 16:17:54
Znalazłem dwie rzeczy:
Pierwszy
textarea{resize: none}
Jest to CSS 3, , który nie został jeszcze wydany , kompatybilny z Firefox 4( i nowsze), Chrome i Safari.
Inną funkcją formatu jest overflow: auto
aby pozbyć się prawego paska przewijania, biorąc pod uwagę dir 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
- Internet Explorer 8
- Firefox 17.0.1
- Chrome
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-06-20 09:12:55
CSS 3 ma nową właściwość dla elementów interfejsu użytkownika, która pozwoli Ci to zrobić. Właściwość jest resize właściwość . Aby wyłączyć zmianę rozmiaru wszystkich elementów textarea, należy dodać następujące elementy do arkusza stylów:
textarea { resize: none; }
Jest to właściwość CSS 3; Użyj wykresu zgodności , aby zobaczyć zgodność przeglądarki.
Osobiście uważam, że to bardzo irytujące, aby zmienić rozmiar na elementach textarea. Jest to jedna z tych sytuacji, w której projektant stara się "break" klienta użytkownika. Jeśli twój projekt nie może pomieścić większej powierzchni tekstowej, możesz rozważyć, jak działa twój projekt. Każdy użytkownik może dodać textarea { resize: both !important; }
do swojego arkusza stylów użytkownika, aby zastąpić swoje preferencje.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-26 09:24:48
<textarea style="resize:none" rows="10" placeholder="Enter Text" ></textarea>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-06 09:19:04
Jeśli potrzebujesz głębokiego wsparcia, możesz użyć starej szkoły techniki:
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-26 09:31:46
Można to łatwo zrobić w HTML:
<textarea name="textinput" draggable="false"></textarea>
To mi pasuje. Domyślną wartością jest true
dla atrybutu draggable
.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-26 09:32:37
Po prostu używasz: resize: none;
w swoim CSS.
Właściwość resize określa, czy element można zmienić rozmiar przez użytkownika.
Uwaga: właściwość resize dotyczy elementów, których obliczone przepełnienie wartość jest czymś innym niż"widzialnym".
Również zmiana rozmiaru nie jest obecnie obsługiwana w przeglądarce Internet Explorer.
Oto różne właściwości zmiany rozmiaru:
Nie. Resize:
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 width
i height
W CSS lub HTML, zapobiegnie to zmianie rozmiaru obszaru textarea, z szerszą obsługą przeglądarek.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-26 09:39:48
Aby wyłączyć właściwość resize, użyj następującej właściwości CSS:
resize: none;
-
Możesz zastosować to jako właściwość stylu inline w następujący sposób:
<textarea style="resize: none;"></textarea>
-
Lub pomiędzy
<style>...</style>
znacznikami elementów jak tak:textarea { resize: none; }
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-10 13:19:46
Możesz po prostu wyłączyć właściwość textarea w następujący sposób:
textarea {
resize: none;
}
Aby wyłączyć w pionie lub w poziomie , użyj
resize: vertical;
Lub
resize: horizontal;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-26 09:40:31
CSS 3 może rozwiązać ten problem. Niestety jest on obecnie obsługiwany tylko przez 60% używanych przeglądarek .
Dla przeglądarek Internet Explorer i iOS nie można wyłączyć zmiany rozmiaru, ale można ograniczyć rozmiar textarea
, ustawiając jego width
i height
.
/* One can also turn on/off specific axis. Defaults to both on. */
textarea { resize:vertical; } /* none|horizontal|vertical|both */
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-26 09:33:49
Stworzyłem małe demo, aby pokazać, jak działają właściwości zmiany rozmiaru. Mam nadzieję, że pomoże również 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-06-13 05:18:22
Za pomocą @style
moż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;" })
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-30 19:21:48
Aby wyłączyć zmianę rozmiaru dla wszystkich textarea
s:
textarea {
resize: none;
}
Aby wyłączyć zmianę rozmiaru dla określonego textarea
, Dodaj atrybut name
lub id
i ustaw go na coś. W tym przypadku nazywa się 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-26 09:35:07
Możesz spróbować również z jQuery
$('textarea').css("resize", "none");
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-12-15 08:15:16
Dodanie !important
sprawia, że działa:
width:325px !important; height:120px !important; outline:none !important;
outline
jest po prostu, aby uniknąć niebieskiego konturu w niektórych przeglądarkach.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-09-26 09:29:43
W reactjs możesz wyłączyć widżet zmiany rozmiaru za pomocą właściwości style.
<textarea id={"multiline-id"} ref={'my-ref'} style={{resize: "none"}} className="text-area-additional-styles" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-09-28 04:45:25