แอตทริบิวต์ readonly ของ <textarea> คืออะไร?
แอตทริบิวต์ readonly ของแท็ก <textarea> ใช้สำหรับ ทำให้ Textarea เป็นแบบอ่านอย่างเดียว (Read-only)** ผู้ใช้ไม่สามารถแก้ไขข้อความภายในได้ แต่ **สามารถเลือกและคัดลอก (Copy) ได้**
ไวยากรณ์ (Syntax)
<textarea readonly>ข้อความที่ไม่สามารถแก้ไขได้</textarea>
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>คำถามสัมภาษณ์</h2>
<p>Q1</p>
<textarea rows="6" cols="70" placeholder="ทำไมคุณถึงต้องการตำแหน่งบรรณาธิการ? (100 คำ)"></textarea>
<p>Q2</p>
<textarea rows="6" cols="70" placeholder="มีประสบการณ์ด้านการเผยแพร่หรือไม่? (100 คำ)"></textarea>
<p>ข้อกำหนดการสัมภาษณ์:</p>
<textarea rows="6" cols="70" readonly>
ผู้สมัครต้องมาถึงก่อน 10.00 น. พร้อมเอกสารประกอบ
</textarea>
</body>
</html>
ผลลัพธ์
Textarea แรกและสอง พิมพ์ได้ (มี placeholder) Textarea ที่ 3 เป็น readonly ไม่สามารถพิมพ์/ลบ/แก้ไขได้ แต่ไฮไลท์และคัดลอกได้
ความแตกต่าง readonly vs disabled
| คุณสมบัติ | readonly | disabled |
|---|---|---|
| แก้ไขข้อความ | ไม่ได้ | ไม่ได้ |
| คัดลอก (Copy) | ได้ | ได้ |
| ส่งค่ากับ Form Submit | **ส่งได้** | **ไม่ส่ง** |
| Focus ได้หรือไม่ | ได้ (Tab เข้าได้) | ไม่ได้ |
| รูปลักษณ์ | ปกติ | สีจาง (Grayed out) |
เมื่อไหร่ควรใช้ readonly?
- แสดงข้อมูลที่ดึงมาจากฐานข้อมูล (Profile, Receipt, Terms)
- ข้อความเงื่อนไข/ข้อกำหนดที่ต้องให้อ่านแต่ห้ามแก้
- ต้องการส่งค่ากับฟอร์ม แต่ไม่ให้ผู้ใช้เปลี่ยน
