แอตทริบิวต์ contenteditable: ทำให้อิลิเมนต์แก้ไขได้บนหน้าเว็บ

ไวยากรณ์ (Syntax)

<element contenteditable="true | false">

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2 contenteditable="true">หัวข้อที่แก้ไขได้</h2>
  <p contenteditable="true">ข้อความนี้แก้ไขได้ ลองคลิกและพิมพ์ดู</p>
  
  <hr>
  
  <div contenteditable="true" style="border: 1px solid #ccc; padding: 10px; min-height: 100px;">
    <p>บล็อกนี้แก้ไขได้หมด เหมือน Text Editor</p>
    <ul>
      <li>รายการ 1</li>
      
รายการ 2
    </ul>
  </div>
</body>
</html>

ผลลัพธ์

หัวข้อและพารากราฟจะมีเคอร์เซอร์เมื่อคลิก สามารถพิมพ์ ลบ แก้ไขได้ทันที บนหน้าเว็บโดยไม่ต้องใช้ <input> หรือ <textarea>

การใช้งานกับ JavaScript

// ตรวจสอบว่า editable หรือไม่
var editable = element.contentEditable; // คืนค่า "true" หรือ "false"

// เปิด/ปิดการแก้ไข
element.contentEditable = "true";
element.contentEditable = "false";

// เหตุการณ์เมื่อแก้ไข
element.addEventListener('input', function() {
  console.log('เนื้อหาเปลี่ยน:', this.innerText);
});

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

• In-place Editing (คลิกแก้ไขทันที เช่น Trello, Notion)
• Rich Text Editor (Contenteditable div + execCommand / Input Events)
• Live Preview / Template Editing
• Collaborative Editing (ร่วมกับ WebSocket)

ข้อควรระวัง

• ซับซ้อนกว่า <textarea> สำหรับฟอร์มทั่วไป
• ต้องจัดการ Paste, Enter, Formatting เอง
• Accessibility: ต้องมี role และ aria-label ให้เหมาะสม
• Cross-browser behavior อาจแตกต่างกันเล็กน้อย