Làm cách nào để vô hiệu hóa thuộc tính có thể thay đổi kích thước của textarea?

2650

Tôi muốn vô hiệu hóa tài sản có thể thay đổi kích thước của a textarea.

Hiện tại, tôi có thể thay đổi kích thước a textareabằng cách nhấp vào góc dưới bên phải của textareavà kéo chuột. Làm thế nào tôi có thể vô hiệu hóa điều này?

Nhập mô tả hình ảnh ở đây

html  css 
— người dùng549757
nguồn
4
@JDIsaaks - hơn nữa, cho phép thay đổi kích thước trong một số tình huống nhất định có thể phá vỡ bố cục và khả năng in (một khía cạnh quan trọng của một dự án quan trọng hiện tại).
— Random_user_name
10
Đôi khi bạn thực sự muốn một textarea không thể thay đổi. Chẳng hạn, trong trường hợp này, khi bạn (có điều kiện) chuyển đổi một vùng văn bản thành một thứ trông giống như một nhãn. Nó trông thật kỳ quặc khi có một nhãn với cách lấy ngẫu nhiên nổi ngẫu nhiên sang một bên.
— neminem
2
Vì tình yêu là tốt, xin đừng làm điều này trên một văn bản thực tế nếu không bạn sẽ xa lánh người dùng quyền lực của mình. Phá vỡ chức năng trình duyệt cốt lõi nên được coi là một lựa chọn hạt nhân.
— siêu sáng

Câu trả lời:

3532

Quy tắc CSS sau đây vô hiệu hóa thay đổi kích thước hành vi cho textareacác thành phần:

textarea {
  resize: none;
}

Để vô hiệu hóa nó cho một số (nhưng không phải tất cả) textarea, có một vài tùy chọn .

Để vô hiệu hóa một cụ thể textareavới namethuộc tính được đặt thành foo(nghĩa là <textarea name="foo"></textarea>):

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

Hoặc, sử dụng một idthuộc tính (nghĩa là <textarea id="foo"></textarea>):

#foo {
  resize: none;
}

Các trang W3C danh sách các giá trị có thể cho thay đổi kích thước hạn chế: không có, cả, ngang, dọc, và kế thừa:

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

Xem lại một trang tương thích tốt để xem những trình duyệt nào hiện đang hỗ trợ tính năng này. Như Jon Hulka đã nhận xét, các kích thước có thể được hạn chế hơn nữa trong CSS bằng cách sử dụng chiều rộng tối đa, chiều cao tối đa, chiều rộng tối thiểu và chiều cao tối thiểu.

Siêu quan trọng cần biết:

Thuộc tính này không làm gì trừ khi thuộc tính tràn là thứ gì đó không nhìn thấy được, đây là mặc định cho hầu hết các phần tử. Vì vậy, nói chung để sử dụng điều này, bạn sẽ phải thiết lập một cái gì đó như tràn: cuộn;

Trích dẫn bởi Sara đối thủ, http://css-tricks.com/almanac/properIES/r/resize/

— Bánh vòng
nguồn
Có giải pháp nào cho Firefox, Opera và / hoặc IE không?
— Vidime Vidas
6
@ Šime IE và FF3 (và trước đó) không thêm hỗ trợ thay đổi kích thước, vì vậy không cần một giải pháp cho chúng. Đối với FF4, giải pháp này sẽ hoạt động.
— Donut
24
theo davidwalsh.name/textarea-resize - sử dụng thay đổi kích thước: dọc hoặc thay đổi kích thước: ngang để hạn chế thay đổi kích thước theo một chiều. Hoặc sử dụng bất kỳ chiều rộng tối đa, chiều cao tối đa, chiều rộng tối thiểu và chiều cao tối thiểu.
— Jon Hulka
3
Tôi có phải là người duy nhất thấy lạ khi đặt cái này bằng css và không thuộc tính không? Tại sao sau đó tôi không thể đặt bị vô hiệu hóa hoặc kiểm tra hoặc các thuộc tính khác bằng CSS ...
— Buksy
6
@Buksy Vì "khuyết tật" là trạng thái, không phải là tài sản trực quan. Do đó, hợp lý là nó không nên được quyết định bởi một ngôn ngữ tạo kiểu .
— Kroltan
105

Tôi tìm thấy hai điều:

Đầu tiên

textarea{resize: none}

Đây là CSS 3, chưa được phát hành , tương thích với Firefox 4 (và phiên bản mới hơn), Chrome và Safari .

Một tính năng định dạng khác là để overflow: autothoát khỏi thanh cuộn bên phải, có tính đến thuộc tính dir .

Mã và các trình duyệt khác nhau

HTML cơ bản

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

Một số trình duyệt

  • Internet Explorer 8

Nhập mô tả hình ảnh ở đây

  • Firefox 17.0.1

Nhập mô tả hình ảnh ở đây

  • Trình duyệt Chrome

Nhập mô tả hình ảnh ở đây

— Rami Jamleh
nguồn
62

CSS 3 có một thuộc tính mới cho các thành phần UI sẽ cho phép bạn làm điều này. Các tài sản là tài sản thay đổi kích thước . Vì vậy, bạn sẽ thêm phần sau vào biểu định kiểu của mình để vô hiệu hóa thay đổi kích thước của tất cả các thành phần textarea:

textarea { resize: none; }

Đây là một thuộc tính CSS 3; sử dụng biểu đồ tương thích để xem khả năng tương thích của trình duyệt.

Cá nhân, tôi sẽ thấy rất khó chịu khi thay đổi kích thước bị vô hiệu hóa trên các yếu tố textarea. Đây là một trong những tình huống mà nhà thiết kế đang cố gắng "phá vỡ" ứng dụng khách của người dùng. Nếu thiết kế của bạn không thể chứa một vùng văn bản lớn hơn, bạn có thể muốn xem xét lại cách thiết kế của bạn hoạt động. Bất kỳ người dùng nào cũng có thể thêm textarea { resize: both !important; }vào biểu định kiểu người dùng của họ để ghi đè tùy chọn của bạn.

— James cựu sinh viên
nguồn
Nhưng đó sẽ là người dùng cố tình phá vỡ bố cục của họ, thay vì người dùng chỉ cần thay đổi kích thước của họ texareavà cuối cùng làm cho một cái gì đó không hoạt động
— Chương trình Redwolf
21

Nếu bạn cần hỗ trợ sâu sắc, bạn có thể sử dụng một kỹ thuật trường học cũ:

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;
}
— yevgeniy
nguồn
7
Cũng sử dụng resize:nonevới giải pháp này để ngăn chặn tay cầm xuất hiện ở góc dưới mà bực bội không hoạt động.
— Macroman
13

Điều này có thể được thực hiện trong HTML dễ dàng:

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

Điều này làm việc cho tôi. Giá trị mặc định là truecho draggablethuộc tính.

— Do đó, Wickramasinghe
nguồn
Đây là thuộc tính HTML 5, vì vậy chỉ những trình duyệt mới hơn mới hỗ trợ. Tôi đọc ở đâu đó IE hỗ trợ nó từ 9 trở đi.
— Antony D'Andrea
4
Điều này làm việc trong hầu hết các trình duyệt. trong mọi trình duyệt mới nhất.
— Doesitha Wickramasinghe
nó sẽ không ngăn được textarea thay đổi kích thước
— Mishko Vladimir
@ AntonyD'Andrea Điều này không hoạt động trên Chrome mới nhất: jsfiddle.net/ps2v8df9
— Advait Junnarkar
6

Để vô hiệu hóa thuộc tính thay đổi kích thước, sử dụng thuộc tính CSS sau:

resize: none;

  • Bạn có thể áp dụng điều này như một thuộc tính kiểu nội tuyến như vậy:

    <textarea style="resize: none;"></textarea>

  • hoặc ở giữa <style>...</style>các thẻ phần tử như vậy:

    textarea {
    resize: none;
}
— Webeng
nguồn
6

Bạn chỉ cần sử dụng: resize: none;trong CSS của bạn.

Các thay đổi kích thước quy định cụ thể tài sản hay không một yếu tố là thay đổi kích thước của người dùng.

Lưu ý: Thuộc tính thay đổi kích thước áp dụng cho các phần tử có giá trị tràn được tính toán không phải là "hiển thị".

Đồng thời thay đổi kích thước không được hỗ trợ trong Internet Explorer.

Dưới đây là các thuộc tính khác nhau để thay đổi kích thước:

Không thay đổi kích thước:

textarea {
  resize: none;
}

Thay đổi kích thước cả hai cách (theo chiều dọc và chiều ngang):

textarea {
  resize: both;
}

Thay đổi kích thước theo chiều dọc:

textarea {
  resize: vertical;
}

Thay đổi kích thước theo chiều ngang:

textarea {
  resize: horizontal;
}

Ngoài ra nếu bạn có widthvà heighttrong CSS hoặc HTML của mình, điều đó sẽ ngăn kích thước văn bản của bạn được thay đổi kích thước, với sự hỗ trợ trình duyệt rộng hơn.

— Alireza
nguồn
3

CSS 3 có thể giải quyết vấn đề này. Thật không may, nó chỉ hỗ trợ trên 60% các trình duyệt được sử dụng hiện nay.

Đối với Internet Explorer và iOS, bạn không thể tắt thay đổi kích thước, nhưng bạn có thể giới hạn textareakích thước bằng cách đặt kích thước widthvà height.

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

Xem bản demo

— Oriol
nguồn
3

Bạn chỉ có thể vô hiệu hóa thuộc tính textarea như thế này:

textarea {
    resize: none;
}

Để tắt thay đổi kích thước dọc hoặc ngang , sử dụng

resize: vertical;

hoặc là

resize: horizontal;
— Peter Mortensen
nguồn
2

Tôi đã tạo một bản demo nhỏ để hiển thị cách thay đổi kích thước các thuộc tính hoạt động. Tôi hy vọng nó sẽ giúp bạn và những người khác là tốt.

.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>
Mở rộng đoạn trích

— Ambuj Khanna
nguồn
1

Với @style, bạn có thể cung cấp cho nó một kích thước tùy chỉnh và vô hiệu hóa tính năng thay đổi kích thước (resize: none;).

@Html.TextAreaFor(model => model.YourProperty, new { @style = "width: 90%; height: 180px; resize: none;" })
— Carlos de Jesus Baez
nguồn
1
Xin chào, cảm ơn câu trả lời của bạn, lần sau xin vui lòng định dạng mã.
— Baptiste Mille-Mathias
Đây là câu trả lời dựa trên asp.net MVC. Rất đẹp.
— Yogihosting 27/12/18
0

Để tắt thay đổi kích thước cho tất cả textareas:

textarea {
    resize: none;
}

Để vô hiệu hóa thay đổi kích thước cho một cụ thể textarea, thêm một thuộc tính namehoặc một idvà đặt nó thành một cái gì đó. Trong trường hợp này, nó được đặt tênnoresize

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
nguồn
-2

Thêm !importantlàm cho nó hoạt động:

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

outline chỉ là để tránh các phác thảo màu xanh trên các trình duyệt nhất định.

— cao su
nguồn
6
Đừng lạm dụng !importantthuộc tính. Vô nghĩa để sửa chiều rộng và chiều cao nếu thuộc tính CSS resize: nonecó thể loại bỏ tính năng thay đổi kích thước
— Raptor
1
Có !importantác không?
— Peter Mortensen
Trong Chrome hiện tại, điều này dừng thay đổi kích thước theo chiều ngang, nhưng tôi vẫn có thể thay đổi kích thước textarea theo chiều dọc.
— Advait Junnarkar
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.