แก้เนื้อหาชิลๆ บน HTML5 ด้วย The contenteditable attribute

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

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

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

คลิกเพิ่มแก้ไขข้อมูล

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

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

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