ดักจับเหตุการณ์การแก้ไขเนื้อหาของ contenteditable ด้วย jQuery

1.4K

วิธีการดักจับเหตุการณ์การแก้ไขเนื้อหาของ 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>

HTML5 jQuery

Echo

แก้ไข 3 ปีที่แล้ว

ชอบ

ลิ้งก์

แชร์

Devdit มีช่อง YouTube แล้ว

เราสร้างวิดีโอเกี่ยวกับเทคโนโลยี ทำตามง่ายๆ

เนื้อหาแนะนำ