Thuộc tính rows của Textarea trong HTML DOM

Thuộc tính rows của đối tượng HTMLTextAreaElement cho phép **lấy hoặc đặt** số hàng hiển thị (chiều cao ước lượng) của textarea. Giá trị là số nguyên dương. Chiều cao thực tế còn phụ thuộc vào line-height, font-size, CSS height (nếu có, ưu tiên cao hơn).

Cú pháp

// Lấy số hàng
var r = textarea.rows;

// Đặt số hàng
textarea.rows = 8;

Ví dụ: Thay đổi số hàng động

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightseagreen; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }

<body>
  <h1>Demo: textarea.rows</h1>
  <textarea>Nội dung mẫu...
Dòng 2
Dòng 3</textarea>
  <button onclick="setRows()" class="btn">Đặt rows = 8</button>
  <script>
    function setRows() {
      document.querySelector("textarea").rows = 8;
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: Textarea hiển thị khoảng 2-3 hàng (mặc định rows=2).
2. Nhấn nút: Chiều cao mở rộng thành 8 hàng.

Lưu ý

• rows là **gợi ý hiển thị** — không giới hạn số ký tự nhập. Dùng maxlength để giới hạn độ dài.
• CSS height hoặc min-height **ghi đè** rows. Nên dùng CSS cho responsive:

textarea { min-height: 100px; resize: vertical; }

• Thuộc tính resize (CSS) cho phép user kéo thả thay đổi kích thước: none, vertical, horizontal, both (mặc định).
• rows="0" hoặc âm: Hành vi không xác định, tránh dùng.

Kết hợp với cols

rows và cols cùng xác định kích thước mặc định. Ví dụ: rows="10" cols="50" ~ 10 dòng x 50 ký tự.

Ví dụ thực tế: Auto-resize textarea

// Tự động điều chỉnh chiều cao theo nội dung
textarea.addEventListener('input', function() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
});

Kỹ thuật này phổ biến trong chat, bình luận, soạn thảo — thay thế cho rows cố định.