ContentEditable แก้ไขเนื้อหาในหน้าเว็บได้ทันทีด้วย HTML5

January 21st, 2011 | by กระปาล์ม | html5 examples

Jan
21

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

คำสั่ง Javascript ที่จะสั่งให้ section ที่มี ID ชื่อว่า editable สามารถแก้ไขข้อความได้ทันที ตัวอย่างเช่น http://html5demos.com/contenteditable

ที่มาจาก http://html5demos.com/contenteditable