เหตุการณ์ oncopy: รันสคริปตเมื่อผู้ใช้คัดลอกข้อความ

เหตุการณ์ oncopy จะถูกกระตุ้นเมื่อผู้ใช้คัดลอก (Copy) เนื้อหาขององค์ประกอบ (มักใช้กับ Input, Textarea, หรือ Element ที่มี ContentEditable) ใช้สำหรับ Tracking, ป้องกันการคัดลอก, หรือปรับเปลี่ยนข้อมูลที่คัดลอก

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
    <input type="text" oncopy="display()" value="คัดลอกฉันได้" readonly>
    <h2 id="test">ลองคัดลอกข้อความในช่องด้านบน</h2>
    <script>
        function display() {
            document.getElementById("test").innerHTML = "คัดลอกสำเร็จ! ✓";
        }
    </script>
</body>
</html>

ตัวอย่างขั้นสูง: ปรับเปลี่ยนข้อมูลที่คัดลอก (Clipboard API)

<input type="text" id="coupon" value="DISCOUNT-2024-ABC" readonly>
<p id="msg"></p>

<script>
    const input = document.getElementById('coupon');
    const msg = document.getElementById('msg');
    
    input.addEventListener('copy', async (e) => {
        e.preventDefault(); // ป้องกัน Default Copy
        
        // เพิ่มข้อมูลเพิ่มเติม
        const textToCopy = `${input.value}\n\nรหัสนี้ใช้ได้ครั้งเดียว\nหมดอายุ 31 ธ.ค. 2567`;
        
        try {
            await navigator.clipboard.writeText(textToCopy);
            msg.textContent = 'คัดลอกรหัสพร้อมรายละเอียดแล้ว! ✓';
            msg.style.color = 'green';
        } catch (err) {
            // Fallback: ใช้ execCommand (Deprecated)
            msg.textContent = 'คัดลอกเองได้ที่ช่องด้านบน';
        }
    });
</script>

Clipboard Events สรุป

⚠️ ข้อควรระวัง

• บล็อกการคัดลอก (Prevent Default) ส่งผลต่อ UX แย่ - ควรหลีกเลี่ยง
• Clipboard API ต้องการ HTTPS และ User Gesture
• บาง Browser/OS จำกัดสิทธิ์ Clipboard Access