เรียนรู้วิธีการตั้งค่าเนื้อหาเว็บเพจที่สามารถแก้ไขได้สำหรับผู้เยี่ยมชมไซต์

ใช้ Contenteditable แอตทริบิวต์

การทำให้ข้อความบนเว็บไซต์แก้ไขได้โดยผู้ใช้ทำได้ง่ายกว่าที่คุณคาดหวัง HTML มีแอตทริบิวต์สำหรับวัตถุประสงค์นี้: contenteditable

แอตทริบิวต์ contenteditable ถูกนำมาใช้ครั้งแรกในปี 2014 โดยมีการเปิดตัว HTML5 จะกำหนดว่าเนื้อหาที่ผู้ใช้กำหนดสามารถเปลี่ยนแปลงได้จากผู้เข้าชมไซต์ภายในเบราว์เซอร์

การสนับสนุน Contenteditable Attribute

เบราว์เซอร์สก์ท็อปที่ทันสมัยที่สุดสนับสนุนแอตทริบิวต์

ซึ่งรวมถึง:

• Chrome 4.0 ขึ้นไป
• Internet Explorer 6 ขึ้นไป
• Firefox 3.5 ขึ้นไป
• Safari 3.1 ขึ้นไป
• Opera 10.1 ขึ้นไป
• Microsoft Edge

เช่นเดียวกันสำหรับเบราว์เซอร์บนมือถือส่วนใหญ่ด้วย

วิธีใช้ Contenteditable

เพียงเพิ่มแอตทริบิวต์ลงในองค์ประกอบ HTML ที่คุณต้องการแก้ไข มีค่าที่เป็นไปได้สามค่า ได้แก่ true, false และ inherit ค่า Inherit เป็นค่าดีฟอลต์ซึ่งหมายความว่าองค์ประกอบจะใช้ค่าของพาเรนต์ ในทำนองเดียวกันองค์ประกอบลูก ๆ ของเนื้อหาที่คุณแก้ไขใหม่จะสามารถแก้ไขได้นอกจากคุณจะเปลี่ยนค่าเป็นเท็จ ตัวอย่างเช่นหากต้องการแก้ไของค์ประกอบ DIV ให้ใช้: