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

Thuộc tính readOnly của đối tượng HTMLTextAreaElement cho phép **lấy hoặc đặt** trạng thái chỉ đọc của textarea. Khi true: người dùng **không thể chỉnh sửa** nội dung, nhưng vẫn có thể **focus, chọn, copy**. Giá trị vẫn được **gửi khi submit form** (khác với disabled).

Cú pháp

// Lấy giá trị
var isReadOnly = textarea.readOnly;

// Đặt giá trị
textarea.readOnly = true;  // hoặc false

Ví dụ: Bật/tắt chế độ chỉ đọc

<!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.readOnly</h1>
  <textarea rows="5" cols="40" name="ghiChu">
Nội dung mẫu: Đây là ghi chú chỉ đọc.
  </textarea>
  <button onclick="toggleReadOnly()" class="btn">Chuyển đổi ReadOnly</button>
  <script>
    function toggleReadOnly() {
      var ta = document.querySelector("textarea");
      ta.readOnly = !ta.readOnly;
      console.log("readOnly:", ta.readOnly);
    }
  </script>
</body>
</html>

Kết quả:

1. Ban đầu: Textarea có thể gõ.
2. Nhấn nút lần 1: readOnly = true → không gõ được, nhưng vẫn chọn/copy được.
3. Nhấn nút lần 2: readOnly = false → gõ được lại.

readOnly vs disabled

Khi nào dùng readOnly?

• Hiển thị nội dung từ server (log, mô tả, điều khoản) cho xem/sao chép.
• Trường được tính toán tự động (tổng, mã hash) — không cho sửa nhưng cần submit.
• Quy trình duyệt: xem trước → bật readOnly → cho phép sửa khi nhấn "Chỉnh sửa".

Mẹo: Kết hợp CSS textarea:read-only { background: #f5f5f5; } để gợi ý trực quan.