บทความนี้อธิบายวิธีจัดการกับเหตุการณ์การเปลี่ยนแปลงที่แก้ไขได้ใน JavaScript และอธิบายโดยใช้ตัวอย่าง
วิธีจัดการกับเหตุการณ์การเปลี่ยนแปลงที่สามารถแก้ไขได้ใน JavaScript
contenteditable เป็นแอตทริบิวต์ที่แจกแจง ผู้ใช้สามารถเปลี่ยนแปลงเนื้อหาได้โดยคำนึงถึงความต้องการของตน หากได้รับอนุญาต เบราว์เซอร์จะเปลี่ยนวิดเจ็ตเพื่อให้สามารถแก้ไของค์ประกอบได้
ค่าใดบ้างที่อนุญาตโดยเหตุการณ์การเปลี่ยนแปลงที่สามารถแก้ไขได้
contenteditable สามารถใช้ค่าใดค่าหนึ่งเหล่านี้:
- ข้อความธรรมดาเท่านั้นแสดงว่าข้อความต้นฉบับสามารถแก้ไขได้แม้ว่าการจัดรูปแบบ Rich Text จะถูกปิดใช้งานก็ตาม
- สตริงว่างหรือจริงซึ่งหมายความว่าองค์ประกอบสามารถแก้ไขได้
- false หมายความว่าไม่สามารถแก้ไของค์ประกอบได้
ตัวอย่าง
ตัวอย่างต่อไปนี้จะอธิบายวิธีการใช้เนื้อหาที่แก้ไขได้บนเว็บเพจ ให้เราดูโค้ดด้านล่างเพื่อทำความเข้าใจให้ดีขึ้น:
HTML
นี่คือโค้ด HTML ที่อธิบายการใช้งานเหตุการณ์การเปลี่ยนแปลงที่แก้ไขได้:
< เครื่องหมายคำพูดบล็อก เป็นที่พอใจ = 'จริง' >
< h3 > แก้ไขเนื้อหาของคุณที่นี่! < / h3 >
< / เครื่องหมายคำพูดบล็อก >
ในโค้ด HTML ข้างต้น:
- แท็ก blockquote ถูกสร้างขึ้นโดยมีแอตทริบิวต์ contenteditable ตั้งค่าเป็นจริง ซึ่งจะทำให้เนื้อหาภายในแท็ก blockquote สามารถแก้ไขได้
- มีแท็ก h3 อยู่ภายในแท็ก blockquote มีข้อความว่า “แก้ไขเนื้อหาของคุณที่นี่!” เนื่องจากมีอยู่ใน
ซึ่งหมายความว่าผู้ใช้สามารถแก้ไขเนื้อหาได้
ซีเอสเอส
เพื่อให้โค้ดของเราดูน่าดึงดูด เราได้ใช้โค้ด CSS ต่อไปนี้:
เครื่องหมายคำพูดบล็อก {
พื้นหลัง : : พีชพัฟ ;
รัศมีชายแดน : : 10px ;
ระยะขอบ : : 10px ;
}
เครื่องหมายคำพูด h3 {
การขยายความ : : 10px ;
}
ในโค้ด CSS ข้างต้น:
- พื้นหลังแท็ก blockquote ถูกตั้งค่าให้มีสีพีชโดยมีรัศมีเส้นขอบ 10px และระยะขอบ 10px
- ส่วนหัว h3 ภายใน blockquote ถูกตั้งค่าให้มีช่องว่างภายใน 10px
เอาท์พุต : :
ผลลัพธ์ต่อไปนี้จะอธิบายวิธีการแก้ไขเนื้อหาโดยใช้เหตุการณ์การเปลี่ยนแปลงที่แก้ไขได้ใน JavaScript:
ความสำคัญของการแก้ไขเนื้อหา
- เพิ่มการโต้ตอบเนื่องจากผู้ใช้สามารถแก้ไขเนื้อหาได้อย่างสะดวก
- การปรับแต่งที่สะดวกในฐานะโปรแกรมเมอร์ด้วยความช่วยเหลือของ JavaScript สามารถสร้างพฤติกรรมที่ปรับเปลี่ยน เช่น การบันทึกอัตโนมัติ ซึ่งทริกเกอร์การดำเนินการต่างๆ ตามอินพุตของผู้ใช้
- ช่วยปรับปรุงกระบวนการแก้ไขให้ผู้ใช้สามารถแก้ไขแบบไดนามิกโดยไม่จำเป็นต้องมีช่องข้อความแยกต่างหาก
บทสรุป
เหตุการณ์การเปลี่ยนแปลงที่แก้ไขได้ใน JavaScript ช่วยให้ผู้ใช้สามารถแก้ไขเนื้อหาที่ทำให้หน้าเว็บตอบสนองและปรับแต่งได้ นี่เป็นการปูทางไปสู่การพัฒนาเว็บที่เน้นผู้ใช้เป็นศูนย์กลาง โดยผู้ใช้สามารถแก้ไขเนื้อหาบนหน้าเว็บได้แบบเรียลไทม์ ทำให้ผู้ใช้ได้รับประสบการณ์ที่ตอบสนองได้ดียิ่งขึ้น บทความนี้กล่าวถึงวิธีจัดการกับเหตุการณ์การเปลี่ยนแปลงที่แก้ไขได้ใน JavaScript และอธิบายโดยใช้ตัวอย่าง