ทำให้เราสามารถแก้ไข Content โดยการคลิกที่ข้อความ และสามารถแก้ไขแล้ว save ทันที การทำงานก็ควบคุมผ่านภาษา Javascript เพื่อให้ Element นั้นๆ สามารถำงานได้ การทำงานของฟีเจอร์นี้ก็จะไปสัมพันธ์กันกับ อีกหนึ่งฟีเจอร์ที่ชื่อว่า Persistent Data Storage เป็นการเก็บข้อมูลสิ่งทีเราต้องการ ไว้ในเครื่องผู้ใช้งาน ซึ่งการทำงานค้ลายๆกับ cookie แต่ Persistent Data Storage มันเก็บได้ถึงระดับดาต้าเบต ซึ่งในตอนนี้ผมยังไม่กล่าวถึง Code ของฟีเจอร์นี้จะแค่ ContentEditable ก่อนละกันครับ ซึ่งตัวอย่าง Code นั้นก็ไม่ได้ซับซ้อนอะไรมาก มี ชุดคำสั่ง HTML5 แค่ 3 บรรทัดนอกนั้นก็เปป็น Javascript อีก 10 กว่าบรรทัด ลองเอาตัวอย่าง Code นี้ไปลองศึกษาดูนะครับ

 

Code <section id="editable" contenteditable="true"> <p>Testing ContentEditable </p> </section>

คำสั่ง HTML5

var editable = document.getElementById('editable'); addEvent(editable, 'blur', function () { localStorage.setItem('contenteditable', this.innerHTML); document.designMode = 'off'; }); addEvent(editable, 'focus', function () { document.designMode = 'on'; }); addEvent(document.getElementById('clear'), 'click', function () { localStorage.clear(); window.location = window.location; // refresh }); if (localStorage.getItem('contenteditable')) { editable.innerHTML = localStorage.getItem('contenteditable'); }