เหตุการณ์ HTML DOM Clipboard

เหตุการณ์ HTML DOM Clipboard ใช้ให้ข้อมูลเกี่ยวกับการแก้ไขของคลิปบอร์ด เหตุการณ์สามารถเป็น cut, copy และ paste เหตุการณ์ Clipboard สามารถใช้เพื่อทำให้ไซต์ของคุณเข้าถึงได้ง่ายขึ้น คือ ให้ข้อมูลแก่ผู้ใช้เกี่ยวกับวิธีที่คลิปบอร์ดถูกแก้ไข

คุณสมบัติ

คุณสมบัติสำหรับเหตุการณ์ Clipboard -

เหตุการณ์

ประเภทเหตุการณ์ต่อไปนี้เป็นของเหตุการณ์ Clipboard -

ไวยากรณ์

ไวยากรณ์สำหรับเหตุการณ์ clipboard ดังนี้ -

var clipboardEvent = new ClipboardEvent(type, [options]);

ที่นี่ type สามารถเป็น 'cut', 'copy' หรือ 'paste' และพารามิเตอร์ที่สองเป็นทางเลือก พารามิเตอร์ที่สองประกอบด้วย clipboardData, dataType และ data

ตัวอย่าง

ลองดูตัวอย่างสำหรับเหตุการณ์ Clipboard หนึ่งคือ oncopy -

<!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 -

ในตัวอย่างข้างต้น -

เราสร้างองค์ประกอบ <input> ที่มี type text มีป้ายกำกับ TEXTBOX และมีข้อความบางส่วนภายในอยู่แล้วสำหรับผู้ใช้เลือก เมื่อคัดลอกข้อความโดยผู้ใช้ เมธอด CopyText() จะถูกเรียกใช้

<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">

เมธอด CopyText() ดึงองค์ประกอบ <p> โดยใช้เมธอด getElementById() บนเอกสาร และแสดง "The text has been copied by you!" ภายในย่อหน้า -

function CopyText() { document.getElementById("Sample").innerHTML = "The text has been copied by you!"; }