วิธีการดักจับเหตุการณ์การแก้ไขเนื้อหาของ contenteditable ด้วย jQuery สามารถทำได้โดยผูกเหตุการณ์ blur กับ Element ที่ใช้คำสั่ง contenteditable สามารถเขียนโปรแกรมได้ดังนี้
1. ติดตั้ง jQuery
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
2. สร้างเนื้อหา และกำหนดคำสั่ง contenteditable
<b>ภาษาที่ชอบ</b>
<p contenteditable="true" id="editor">PHP, Python, Ruby, HTML</p>
ส่วนนี้มีการกำหนด id = editor เพื่อใช้สำหรับอ้างอิงตอนเขียน JavaScript ด้วย jQuery
3. เขียนโปรแกรมส่วน jQuery
<script type='text/javascript'>
$('#editor').on('blur', function() {
var msg = $(this).html();
console.log( msg );
});
</script>
โปรแกรมด้านบนมีการใช้คำสั่ง blur เพื่อดักจับเหตุการณ์เมื่อ id #editor ถูกยกเลิกการ focus (ออกจากการแก้ไข) ก็จะส่งข้อมูลภายใน id #editor ให้กับตัวแปร msg จากนั้นนำตัวแปร msg ไปแสดงด้วยคำสั่ง console.log ถึงขั้นตอนนี้เราสามารถนำตัวแปร msg ส่งไปอัพเดทแบบเรียลไทม์ด้วย AJAX ต่อได้เลย
ตัวอย่าง โปรแกรมแบบเต็ม
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<b>ภาษาที่ชอบ</b>
<p contenteditable="true" id="editor">PHP, Python, Ruby, HTML</p>
<script type='text/javascript'>
$('#editor').on('blur', function() {
var msg = $(this).html();
console.log( msg );
});
</script>
</body>
</html>