แอตทริบิวต์ readonly ของ <input> ใน HTML

แอตทริบิวต์ readonly คืออะไร?

แอตทริบิวต์ readonly (Boolean Attribute) ใช้ประกาศว่า <input> (หรือ <textarea>) **ไม่สามารถแก้ไขได้โดยผู้ใช้** แต่:

• ค่าสามารถ **คัดลอก (Copy)** ได้
• ค่า **จะถูกส่งไปกับฟอร์ม** เมื่อ Submit (ต่างจาก disabled)
• ยังสามารถ **โฟกัส (Focus)** ได้ (Tab เข้าไปได้)
• สไตล์ CSS เริ่มต้นมักจะมีพื้นหลังสีเทาอ่อน หรือใช้ :read-only pseudo-class จัดสไตล์เอง

ความแตกต่าง: readonly vs disabled

ตัวอย่าง: อีเมลติดต่อที่ไม่ให้แก้ไข แต่คัดลอกได้

<!DOCTYPE html>
<html>
<head>
  <title>Input Email readOnly Demo</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    input:read-only { background-color: #f5f5f5; border-color: #ccc; cursor: not-allowed; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>อีเมลติดต่อ (Read-Only)</legend>
      <label>ติดต่อเรา: 
        <input type="email" id="contactEmail" value="support@company.com" readonly onclick="showNotice()">
      </label>
      <input type="button" onclick="copyEmail()" value="คัดลอกอีเมล">
      <div id="msg">อีเมลนี้เป็นแบบอ่านอย่างเดียว ไม่สามารถแก้ไขได้</div>
    </fieldset>
  </form>

  <script>
    var msg = document.getElementById("msg");
    var emailInput = document.getElementById("contactEmail");

    function showNotice() {
      msg.textContent += " | ไม่สามารถแก้ไขได้ครับ";
    }

    function copyEmail() {
      emailInput.select(); // เลือกข้อความทั้งหมด
      document.execCommand('copy'); // คัดลอก (Deprecated แต่ยังทำงาน)
      // ทางเลือกสมัยใหม่: await navigator.clipboard.writeText(emailInput.value);
      msg.textContent = 'คัดลอกแล้ว: ' + emailInput.value;
      msg.style.color = "green";
    }
  </script>
</body>
</html>

การเข้าถึงผ่าน JavaScript

// อ่านค่า
var isReadOnly = inputElement.readOnly; // true/false

// ตั้งค่า (Toggle)
inputElement.readOnly = true;  // ทำให้อ่านอย่างเดียว
inputElement.readOnly = false; // อนุญาตให้แก้ไข

กรณีใช้งานจริง (Use Cases)

• ข้อมูลอ้างอิง: รหัสสินค้า, หมายเลขคำสั่งซื้อ, ID ผู้ใช้ ที่ไม่ควรให้เปลี่ยน
• ค่าที่คำนวณแล้ว: ราคารวม, ภาษี, ส่วนลด ที่คำนวณโดยระบบ
• ข้อมูลจากฐานข้อมูล: แสดงข้อมูลโปรไฟล์ที่ดึงมา แต่อนุญาตให้คัดลอก
• ฟอร์มหลายขั้นตอน (Multi-step): ขั้นตอนก่อนหน้าที่ยืนยันแล้ว

หมายเหตุ: แอตทริบิวต์ readonly ไม่ได้รองรับ <select>, <input type="checkbox">, <input type="radio">, <input type="file"> สำหรับกรณีเหล่านี้ให้ใช้ disabled หรือ CSS pointer-events: none แทน