Tắt thay đổi kích thước vùng văn bản

Tôi đang cố gắng tắt thay đổi kích thước textarea trong trang web của mình; ngay bây giờ tôi đang sử dụng phương pháp này:

.textarea {
    clear:left;
    min-width: 267px;
    max-width: 267px;
    min-height:150px;
    max-height:150px;
}

Tôi biết rằng phương pháp của mình không đúng và tôi đang tìm kiếm một phương pháp tốt hơn trong JavaScript. Tôi là người mới bắt đầu, vì vậy giải pháp tốt nhất cho tôi sẽ là HTML5 hoặc jQuery.

Hãy thử CSS này để tắt thay đổi kích thước

CSS để vô hiệu hóa việc thay đổi kích thước cho tất cả các textareas trông giống như sau:

textarea {
    resize: none;
}

Thay vào đó, bạn có thể chỉ định nó cho một vùng văn bản theo tên (nơi chứa HTML của vùng văn bản):

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

Hoặc theo id (nơi chứa HTML của textarea):

#foo {
    resize: none;
}

Lấy từ: http://www.electrictoolbox.com/disable-textarea-resizing-safari-chrome/

điều này sẽ làm công việc của bạn

  textarea{
        resize:none;
    }

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

Đối với IE 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 widthvà height.

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

Xem Demo

Nó có thể được thực hiện dễ dàng chỉ bằng cách sử dụng thuộc tính có thể kéo html

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

Giá trị mặc định là true.

Chỉ cần một tùy chọn bổ sung, nếu bạn muốn hoàn nguyên hành vi mặc định cho tất cả các textareas trong ứng dụng, bạn có thể thêm phần sau vào CSS của mình:

textarea:not([resize="true"]) {
  resize: none !important;
}

Và làm như sau để kích hoạt nơi bạn muốn thay đổi kích thước:

<textarea resize="true"></textarea>

Lưu ý rằng giải pháp này có thể không hoạt động trên tất cả các trình duyệt mà bạn có thể muốn hỗ trợ. Bạn có thể kiểm tra danh sách hỗ trợ resizetại đây: http://caniuse.com/#feat=css-resize

Theo câu hỏi, tôi đã liệt kê các câu trả lời bằng javascript

Bằng cách chọn TagName

document.getElementsByTagName('textarea')[0].style.resize = "none";

Bằng cách chọn Id

document.getElementById('textArea').style.resize = "none";

//CSS:
.textarea {
    resize: none;
    min-width: //-> Integer number of pixels
    min-height: //-> Integer number of pixels
    max-width: //-> min-width
    max-height: //-> min-height
}

mã trên hoạt động trên hầu hết các trình duyệt

//HTML:
<textarea id='textarea' draggable='false'></textarea>

làm cả hai để nó hoạt động trên số lượng trình duyệt tối đa

Điều này phù hợp với tôi

<textarea
  type='text'
  style="resize: none"
>
Some text
</textarea>