Đối tượng Textarea trong HTML DOM

Đối tượng Textarea trong HTML DOM đại diện cho phần tử <textarea> — ô nhập văn bản nhiều dòng. Cho phép truy xuất và thao tác các thuộc tính, giá trị, hành vi của textarea bằng JavaScript.

Tạo Textarea động

var ta = document.createElement("TEXTAREA");

Các thuộc tính chính

Thuộc tính	Mô tả
`autofocus`	Tự động focus khi tải trang (boolean)
`defaultValue`	Giá trị mặc định (ban đầu), khác `value` (giá trị hiện tại)
`cols`	Số cột (chiều rộng ước lượng theo ký tự)
`disabled`	Vô hiệu hóa (boolean)
`form`	Tham chiếu đến `<form>` bao quanh (read-only)
`maxLength`	Số ký tự tối đa cho phép
`name`	Tên trường (gửi form)
`placeholder`	Gợi ý hiển thị khi rỗng
`readOnly`	Chỉ đọc (boolean)
`required`	Bắt buộc nhập (boolean)
`rows`	Số hàng (chiều cao ước lượng)
`type`	Luôn là `"textarea"` (read-only)
`value`	Nội dung hiện tại (có thể thay đổi)
`wrap`	Chế độ xuống dòng: `"soft"` (mặc định), `"hard"`, `"off"`

Phương thức

Phương thức	Mô tả
`select()`	Chọn toàn bộ nội dung (highlight)
`setSelectionRange(start, end)`	Chọn đoạn từ `start` đến `end`
`setRangeText(text, start, end, mode)`	Thay thế đoạn văn bản trong range

Ví dụ: Tạo textarea động

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightseagreen; height: 100vh; text-align: center; }
  .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: Tạo Textarea động</h1>
  <button onclick="createTA()" class="btn">Tạo Textarea</button>
  <script>
    function createTA() {
      var ta = document.createElement("TEXTAREA");
      ta.value = "Tôi là textarea được tạo bằng JavaScript!";
      ta.rows = 6;
      ta.cols = 40;
      ta.placeholder = "Gõ thêm ở đây...";
      document.body.appendChild(ta);
    }
  </script>
</body>
</html>

Kết quả:

Nhấn nút → Textarea xuất hiện dưới nút, có sẵn nội dung, 6 hàng, 40 cột.

Lưu ý quan trọng

value vs defaultValue: defaultValue = giá trị ban đầu (HTML attribute), value = giá trị hiện tại (thay đổi khi user gõ). Reset form (form.reset()) khôi phục value = defaultValue.
wrap="hard": Khi submit, trình duyệt chèn xuống dòng thật (\\n) theo cols. wrap="soft": Chỉ xuống dòng hiển thị, không chèn vào giá trị submit.
Dùng textarea.value để lấy nội dung submit, không dùng innerHTML.