Câu hỏi Làm thế nào để vô hiệu hóa tài sản resizable của textarea?


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

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


2162
2018-03-08 16:15


gốc


@JDIsaacks. Tôi không đồng ý. Điều đó giống như nói rằng làm cho người dùng dễ dàng xóa kiểu tùy chỉnh khỏi hộp văn bản và nút. Đó là trang web của tôi và đó là thiết kế của tôi. Tôi không muốn nó trông giống như windows / mac / etc, tôi muốn nó trông giống như ứng dụng / trang web của tôi. - Paul Fleming
@JDIsaaks - hơn nữa, cho phép thay đổi kích thước trong các tình huống nhất định có thể phá vỡ bố trí và printabilit (một khía cạnh quan trọng của một dự án nhiệm vụ quan trọng hiện tại). - cale_b
Đôi khi bạn thực sự muốn một văn bản không thể thay đổi kích thước. Ví dụ, trong trường hợp này, khi bạn (có điều kiện) chuyển đổi một textarea thành một cái gì đó mà chỉ trông giống như một nhãn. Có vẻ rất kỳ quặc khi có một nhãn với một cách lấy nổi nổi ngẫu nhiên ở bên cạnh. - neminem
@Gherman Trong thiết kế phần mềm ý kiến ​​của tôi là một trong những mức độ cao nhất của hình thức nghệ thuật, và tương tự cuốn sách của bạn không có ý nghĩa gì cả. - quemeful


Các câu trả lời:


Quy tắc CSS sau tắt hành vi thay đổi kích thước cho textarea yếu tố:

textarea {
  resize: none;
}

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

Để vô hiệu hóa một textarea với name thuộc tính được đặt thành foo (I E., <textarea name="foo"></textarea>):

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

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

#foo {
  resize: none;
}

Các Trang W3C liệt kê các giá trị có thể cho các hạn chế thay đổi kích thước: none, both, horizontal, vertical, và inherit:

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

Xem xét một phong nha trang tương thích để xem những trình duyệt nào hiện hỗ trợ tính năng này. Như Jon Hulka đã bình luận, kích thước có thể là tiếp tục hạn chế trong CSS 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.

Điề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à một cái gì đó không phải là hiển thị, đây là mặc định cho hầu hết các phần tử. Vì vậy, nói chung để sử dụng này, bạn sẽ phải thiết lập một cái gì đó như tràn: di chuyển;

Trích dẫn của Chris Coyier,    http://css-tricks.com/almanac/properties/r/resize/


2872
2018-03-08 16:17



Có giải pháp cho Firefox, Opera và / hoặc IE không? - Šime Vidas
@ Šime IE và FF3 (và trước đó) không thêm hỗ trợ thay đổi kích thước, do đó, một giải pháp cho họ là không cần thiết. Đối với FF4, giải pháp này sẽ hoạt động. - Donut
theo davidwalsh.name/textarea-resize - sử dụng thay đổi kích thước: dọc hoặc đổi kích thước: ngang để hạn chế thay đổi kích thước thành một thứ nguyên. 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
Tôi có phải là người duy nhất tìm thấy nó lạ để thiết lập điều này bằng cách sử dụng css và không thuộc tính? Tại sao tôi không thể sau đó thiết lập bị vô hiệu hóa hoặc kiểm tra hoặc tài sản khác bằng cách sử dụng CSS ... - Buksy
@Buksy Bởi vì "vô hiệu hóa" là một nhà nước, không phải là một tài sản hình ảnh. Vì vậy, nó hợp lý rằng nó không nên được quyết định bởi một tạo kiểu ngôn ngữ. - Kroltan


Trong CSS ...

textarea {
    resize: none;
}

174
2018-03-08 16:17



Cá nhân tôi thích câu trả lời này tốt hơn. Đến điểm. - quemeful


Tôi đã tìm thấy 2 thứ

Đầu tiên

textarea{resize:none}

đây là một css3 chưa được phát hành tương thích với Firefox4 + chrome và safari 

một tính năng định dạng khác là tràn: tự động để loại bỏ thanh cuộn bên phải có tính đến dir thuộc tính

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

  • IE8

enter image description here

  • FF 17.0.1

enter image description here

  • chrome

enter image description here


91
2017-12-27 20:58





CSS3 có tính thích hợp mới cho các phần tử giao diện người dùng cho phép bạn thực hiện việc này. Tài sản là thay đổi kích thước tài sản. Vì vậy, bạn sẽ thêm thông tin 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 phần tử văn bản:

textarea { resize: none; }

Đây là thuộc tính CSS3; sử dụng một 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ẽ tìm thấy nó rất khó chịu để có thay đổi kích thước 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ỡ" khách hàng 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.


57
2018-03-08 16:35





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

19
2017-11-06 09:19





Nếu bạn cần hỗ trợ sâu, bạn có thể sử dụng 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;
}

18
2018-02-12 12:14



Cũng sử dụng resize:none với giải pháp này để ngăn chặn các xử lý xuất hiện ở góc dưới mà bực bội không hoạt động. - MacroMan


Điều này có thể làm 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à true cho draggable thuộc tính.


9
2017-07-21 05:18



Đây là thuộc tính HTML 5, do đó chỉ các 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
Đ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. - Thusitha Wickramasinghe
nó sẽ không ngăn không cho văn bản thay đổi kích thước - Mishko Vladimir


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

Các thay đổi kích thước thuộc tính xác định có hay không một phần tử có thể thay đổi kích thước   bởi người dùng.

Chú thích: Thuộc tính thay đổi kích thước áp dụng cho các phần tử có tràn tính toán   giá trị là một thứ khác với "hiển thị".

Cũng thế thay đổi kích thước không được hỗ trợ trong IE vào lúc này.

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

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

textarea { 
  resize: none; 
}

Thay đổi kích thước cả hai chiều (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ó width và height trong CSS hoặc HTML của bạn, nó sẽ ngăn văn bản của bạn được thay đổi kích thước, với một trình duyệt hỗ trợ rộng hơn.


4
2018-06-01 13:11