Mỗi lần tôi phát triển một hình thức mới bao gồm một textareavấn đề nan giải sau đây khi tôi cần chỉ định kích thước của nó:

Sử dụng CSS hoặc sử dụng các textareathuộc tính colsvàrows ?

Những ưu và nhược điểm của từng phương pháp là gì?

Các ngữ nghĩa của việc sử dụng các thuộc tính này là gì?

Làm thế nào nó thường được thực hiện?

Tôi khuyên bạn nên sử dụng cả hai. Hàng và cols là bắt buộc và hữu ích nếu máy khách không hỗ trợ CSS. Nhưng là một nhà thiết kế, tôi đã ghi đè lên chúng để có được kích thước chính xác mà tôi muốn.

Cách được đề xuất là thông qua biểu định kiểu bên ngoài, ví dụ:

textarea {
  width: 300px;
  height: 150px;
}

<textarea> </textarea>

textarea { height: auto; }

<textarea rows="10"></textarea>

Điều này sẽ kích hoạt trình duyệt để đặt chiều cao của textarea CHÍNH XÁC với số lượng hàng cộng với phần đệm xung quanh nó. Đặt chiều cao CSS thành một lượng pixel chính xác sẽ để lại các khoảng trắng tùy ý.

Theo w3c, cols và hàng đều là các thuộc tính bắt buộc cho textareas. Hàng và Cols là số lượng ký tự sẽ phù hợp với vùng văn bản thay vì pixel hoặc một số giá trị tùy ý khác. Đi với các hàng / cols.

Câu trả lời là "có". Đó là, bạn nên sử dụng cả hai. Không có hàng và cols (và có các giá trị mặc định ngay cả khi bạn không sử dụng chúng một cách rõ ràng), textarea nhỏ đến mức không thể tin được nếu CSS bị vô hiệu hóa hoặc bị ghi đè bởi biểu định kiểu người dùng. Luôn luôn giữ mối quan tâm tiếp cận trong tâm trí. Điều đó đang được nói, nếu biểu định kiểu của bạn được phép kiểm soát sự xuất hiện của textarea, bạn thường sẽ kết thúc với một cái gì đó trông tốt hơn nhiều, phù hợp với thiết kế trang tổng thể và có thể thay đổi kích thước để theo kịp đầu vào của người dùng ( trong giới hạn của hương vị tốt, tất nhiên).

Đối với vùng văn bản, chúng tôi có thể sử dụng css bên dưới để sửa kích thước

    <textarea  class="form-control" style=" min-width:500px; max-width:100%;min-height:50px;height:100%;width:100%;" ></textarea>

Đã thử nghiệm trong angularjs và angular7

 <textarea style="width:300px; height:150px;" ></textarea>

Kích thước của một textarea có thể được chỉ định bởi các thuộc tính cols và rows, hoặc thậm chí tốt hơn; thông qua các thuộc tính chiều cao và chiều rộng của CSS. Thuộc tính cols được hỗ trợ trong tất cả các trình duyệt chính. Một sự khác biệt chính là <TEXTAREA ...>thẻ container: nó có thẻ start ().

Tôi thường không chỉ định height, nhưng đừng chỉ định width: ...và rowsvàcols .

Thông thường, trong các trường hợp của tôi, chỉ widthvà rowslà cần thiết, để textarea trông đẹp hơn so với các elem khác. (Vàcols là một dự phòng nếu ai đó không sử dụng CSS, như được giải thích trong các câu trả lời khác.)

((Chỉ định cả hai rowsvà heightcảm thấy hơi giống như sao chép dữ liệu tôi nghĩ vậy?))

Một tính năng chính của textareas là chúng có thể mở rộng. Trên trang web, điều này có thể dẫn đến các thanh cuộn xuất hiện trên vùng văn bản nếu độ dài văn bản lấp đầy khoảng trống bạn đặt (có thể là sử dụng hàng hoặc sử dụng CSS. Đó có thể là vấn đề khi người dùng quyết định in, đặc biệt là với 'In' thành PDF - vì vậy hãy đặt chiều cao tối thiểu lớn thoải mái cho các văn bản in bằng quy tắc CSS có điều kiện:

@media print { 
textarea {
min-height: 900px;  
}
}

nếu bạn không sử dụng mỗi lần sử dụng chiều cao dòng: '..'; thuộc tính kiểm soát chiều cao của textarea và chiều rộng thuộc tính cho chiều rộng của textarea.

hoặc bạn có thể sử dụng kích thước phông chữ bằng cách làm theo css:

#sbr {
  font-size: 16px;
  line-height:1.4;
  width:100%;
}

Các hàng và cols HTML không phản hồi!

Vì vậy, tôi xác định kích thước trong CSS. Mẹo nhỏ: nếu bạn xác định kích thước nhỏ cho điện thoại di động, hãy nghĩ đến việc sử dụngtextarea:focus {};

Thêm một số không gian thừa ở đây, sẽ chỉ mở ra khoảnh khắc người dùng muốn thực sự viết một cái gì đó

CSS

input
{
    width: 300px;
    height: 40px;
} 

HTML

<textarea rows="4" cols="50">HELLO</textarea>