ทำให้ผู้ใช้ไซต์สามารถแก้ไขเนื้อหาของหน้าเว็บได้

การทำให้ข้อความบนเว็บไซต์แก้ไขได้โดยผู้ใช้ทำได้ง่ายกว่าที่คุณคาดหวัง 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 ที่คุณต้องการแก้ไข มีสามค่าที่เป็นไปได้:จริง, เท็จ และ สืบทอด. สืบทอด เป็นค่าดีฟอลต์ซึ่งหมายความว่าองค์ประกอบจะใช้ค่าของพาเรนต์ ในทำนองเดียวกันองค์ประกอบลูก ๆ ของเนื้อหาที่คุณแก้ไขใหม่จะสามารถแก้ไขได้นอกจากคุณจะเปลี่ยนค่าเป็น เท็จ. ตัวอย่างเช่นการทำ a DIV องค์ประกอบที่แก้ไขได้ใช้:

สร้างรายการสิ่งที่ต้องทำที่สามารถแก้ไขได้ด้วย Contenteditable

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

1. เปิดหน้าเว็บของคุณในโปรแกรมแก้ไข HTML
2. สร้างรายการที่มีสัญลักษณ์แสดงหัวข้อย่อยที่ไม่มีชื่อ myTasks:
   2. บางงาน
   4. อีกงานหนึ่ง
5. เพิ่มcontenteditable แอตทริบิวต์การ
   ธาตุ:
   ขณะนี้คุณมีรายการสิ่งที่ต้องทำซึ่งสามารถแก้ไขได้ แต่ถ้าคุณปิดเบราเซอร์หรือออกจากหน้านี้รายการของคุณจะหายไป การแก้ปัญหา: เพิ่มสคริปต์ง่ายๆเพื่อบันทึกงานไปที่ localStorage
8. เพิ่มลิงก์ไปยัง jQuery ใน ของเอกสารของคุณ ตัวอย่างนี้ใช้ Google CDN แต่คุณสามารถโฮสต์ได้เองหรือใช้ CDN อื่นถ้าต้องการ
11. ที่ด้านล่างของหน้าอยู่ด้านบน เพิ่มสคริปต์ของคุณ: นี่คือจุดเริ่มต้นของ jQuery document.ready และบอกเบราเซอร์ให้โหลดสคริปต์นี้หลังจากที่เอกสารโหลดเสร็จสมบูรณ์แล้ว

ข้างใน document.ready เพิ่มสคริปต์ของคุณเพื่อโหลดงานลงในพื้นที่เก็บข้อมูลและรับงานที่บันทึกไว้ที่ใดก่อนหน้านี้: $ (document.ready (function () {

1. $ ("# myTasks") เบลอ (function () {// เมื่อเคอร์เซอร์ออกจาก #myTasks element
4. localStorage.setItem ('myTasksData', this.innerHTML); // บันทึกไปที่ localStorage
7. });
10. if (localStorage.getItem ('myTasksData')) {// ถ้ามีเนื้อหาใน localStorage
13. $ ( "# myTasks") HTML (localStorage.getItem ( 'myTasksData')). // ใส่เนื้อหาในหน้าเว็บ
16. }
17. });

HTML สำหรับทั้งหน้ามีลักษณะดังนี้:

งานของฉัน

ป้อนรายการสำหรับรายการของคุณ เบราเซอร์จะจัดเก็บข้อมูลไว้ให้คุณเพื่อที่เมื่อคุณเปิดเบราว์เซอร์ใหม่แล้วจะยังคงอยู่ที่นี่

• บางงาน
• อีกงานหนึ่ง