การเขียนแอพพลิเคชันเพื่อแก้ไขข้อมูลใน HTML Version ก่อนๆ เราจำเป็นต้อง Design ให้หน้าแสดงผลและหน้าสำหรับแก้ไขแยกออกจากกัน หรือถ้าต้องการให้อยู่ในหน้าเดียวก็ต้องเขียน Script ซึ่งวุ่นวายทีเดียว

แต่สำหรับ HTML5 แล้ว เราสามารถทำการแก้ไขเนื้อหาที่ต้องการได้ เพียงแค่กดคลิกที่เนื้อหานั้นๆ ก็สามารถแก้ไขข้อมูลได้ทันที ทำให้ Web Application ทำงานง่ายและรวดเร็วมากยิ่งขึ้น เรามาลองดูการใช้งาน Contenteditable attribute บน HTML5 กันเลยดีกว่า

สำหรับการใช้งานสามารถทำได้ง่ายๆ เพียงแค่ทำการใส่ attribute : contenteditable=”true” เข้าไปเท่านั้น ตัวอย่างเช่น

เราสามารถเพิ่ม CSS เพื่อเพิ่มความสวยงามและสื่อให้ผู้ใช้ทราบว่า ส่วนของเนื้อหาดังกล่าวสามารถแก้ไขได้ ด้วยโค้ดดังต่อไปนี้

จากโค้ดจะเห็นได้ว่าส่วนของการกำหนดให้ Div สามารถแก้ไขข้อมูลได้ เพียงแค่ใส่ contenteditable=”true” เข้าไปเท่านั้น แต่จะมีการเพิ่มส่วนของ CSS ที่จะแสดงผลในพื้นที่ที่สามารถแก้ไขข้อมูลได้ และเมื่อนำเคอร์เซอร์เมาส์ไปวางเหนือพื้นที่ดังกล่าวก็จะเปลี่ยนสีได้ดังภาพต่อไปนี้

กรณีที่มีการคลิกเพื่อแก้ไขข้อมูลจะสามารถพิมพ์แก้ไขข้อมูลได้ทันที เพียงเท่านี้ก็เรียบร้อยแล้ว สำหรับการแก้ไขข้อมูลโดยไม่ต้องทำหน้าฟอร์มสำหรับแก้ไข แยกกับการแสดงผล เหมือนที่ผ่านๆ มา ช่วยเพิ่มความสะดวก รวดเร็ว สำหรับผู้ใช้มากยิ่งขึ้น