Event ใดเกิดเมื่อ Copy เนื้อหา Element ใน JavaScript?

Event oncopy ทริกเกอร์เมื่อ User Copy เนื้อหา ของ Element (Ctrl+C, Right-click → Copy, Menu → Copy)

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <body>
    <input type="text" oncopy="copyFunction()" value="copy the text">
    <script>
      function copyFunction() {
        document.write("Text copied!");
      }
    </script>
  </body>
</html>

คำอธิบาย

• ทริกเกอร์ก่อน Copy จริง — สามารถ event.preventDefault() เพื่อ Block Copy
• เข้าถึง/แก้ไข Clipboard: event.clipboardData.setData('text/plain', 'custom text')
• ทำงานกับ: Input, Textarea, ContentEditable, Selected Text

ClipboardData ใน Copy Event

element.addEventListener('copy', (e) => {
  // เพิ่ม Copyright Notice
  const selection = window.getSelection().toString();
  const copyright = '\n\n© 2024 MySite. All rights reserved.';
  e.clipboardData.setData('text/plain', selection + copyright);
  e.preventDefault(); // ป้องกัน Default Copy
});

Clipboard Events ทั้งหมด

การใช้งานจริง

• Add Attribution: Append Source URL/Copyright เมื่อ Copy
• Format Conversion: Convert Rich Text → Plain Text/Markdown
• Analytics: Track Copy Events (Content Engagement)
• Prevent Copy: DRM/Content Protection (User Hostile - ไม่แนะนำ)

Security Note: Clipboard API ต้อง HTTPS และ User Activation ในบาง Browser