เหตุการณ์คลิปบอร์ด HTML DOM ใช้เพื่อให้ข้อมูลเกี่ยวกับการแก้ไขคลิปบอร์ด เหตุการณ์สามารถตัด คัดลอก และวาง สามารถใช้เหตุการณ์คลิปบอร์ดเพื่อทำให้ไซต์ของคุณสามารถเข้าถึงได้มากขึ้น เช่น ให้ข้อมูลผู้ใช้เกี่ยวกับวิธีการแก้ไขคลิปบอร์ด
คุณสมบัติ
ต่อไปนี้เป็นคุณสมบัติสำหรับเหตุการณ์คลิปบอร์ด -
| ทรัพย์สิน | คำอธิบาย |
|---|---|
| ข้อมูลคลิปบอร์ด | การส่งคืนวัตถุที่มีข้อมูลที่ได้รับผลกระทบจากการทำงานของคลิปบอร์ด (ตัด คัดลอก หรือวาง) |
เหตุการณ์
ต่อไปนี้เป็นประเภทเหตุการณ์ที่เป็นของเหตุการณ์คลิปบอร์ด -
| กิจกรรม | คำอธิบาย |
|---|---|
| คัดลอก | เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้คัดลอกเนื้อหาขององค์ประกอบ |
| ออนคัท | เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้ตัดเนื้อหาขององค์ประกอบ |
| วางทับ | เหตุการณ์นี้เริ่มทำงานเมื่อผู้ใช้วางเนื้อหาบางส่วนในองค์ประกอบ |
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับเหตุการณ์คลิปบอร์ด -
var clipboardEvent = new ClipboardEvent(type,[options]);
ที่นี่ประเภทสามารถ 'ตัด' 'คัดลอก' หรือ 'วาง' และพารามิเตอร์ที่สองเป็นทางเลือก พารามิเตอร์ที่สองประกอบด้วย clipboardData, dataType และ data
ตัวอย่าง
ให้เราดูตัวอย่างของเหตุการณ์ในคลิปบอร์ดบนสำเนา -
<!DOCTYPE html>
<html>
<body>
<form>
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
</label>
</form>
<p id="Sample"></p>
<script>
function CopyText() {
document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}
</script>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
ในการคัดลอกข้อความภายใน TEXTBOX -
ในตัวอย่างข้างต้น −
เราได้สร้าง องค์ประกอบที่มีข้อความประเภท มีป้ายกำกับ TEXTBOX และมีข้อความอยู่ข้างในให้ผู้ใช้เลือก ในการคัดลอกข้อความโดยผู้ใช้ วิธีการ CopyText() จะถูกดำเนินการ
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
เมธอด CopyText() รับ
องค์ประกอบโดยใช้เมธอด getElementById() บนเอกสารและแสดงข้อความว่า "คุณคัดลอกข้อความแล้ว!" ในย่อหน้า
function CopyText() {
document.getElementById("Sample").innerHTML = "The text has been copied by you!"
} 