परिचय
HTML oncopy इवेंट एट्रिब्यूट तब ट्रिगर होता है जब उपयोगकर्ता HTML दस्तावेज़ में किसी HTML एलिमेंट की सामग्री को कॉपी करता है। यह क्लिपबोर्ड इवेंट API का हिस्सा है।
सिंटैक्स
<tagname oncopy="script"></tagname>
उदाहरण
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
font-family: Arial, sans-serif;
padding: 20px;
}
p {
font-size: 1.1rem;
padding: 1rem;
background: white;
border-radius: 8px;
max-width: 600px;
margin: 1rem auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.show {
margin-top: 1rem;
font-weight: bold;
color: #db133a;
}
</style>
</head>
<body>
<h1>HTML oncopy इवेंट एट्रिब्यूट डेमो</h1>
<p oncopy="handleCopy()" contenteditable="true">मैं कुछ डमी टेक्स्ट वाला एक पैराग्राफ HTML एलिमेंट हूँ। इस टेक्स्ट को कॉपी करने का प्रयास करें।</p>
<p style="color:#db133a;">ऊपर दिए गए पैराग्राफ से टेक्स्ट कॉपी करने का प्रयास करें।</p>
<div class="show"></div>
<script>
function handleCopy() {
document.querySelector('.show').innerHTML = "टेक्स्ट कॉपी किया गया! (oncopy इवेंट ट्रिगर हुआ)";
document.body.style.background = "lightblue";
}
</script>
</body>
</html>
आउटपुट
एक संपादन योग्य पैराग्राफ दिखाई देगा। जब उपयोगकर्ता इसका टेक्स्ट चुनकर कॉपी करता है (Ctrl+C या राइट-क्लिक > कॉपी), तो पृष्ठभूमि रंग बदल जाएगा और संदेश प्रदर्शित होगा।
महत्वपूर्ण बिंदु
oncopyकेवल उन एलिमेंट्स पर काम करता है जो संपादन योग्य हैं या फॉर्म इनपुट्स हैं- यह
ClipboardEventऑब्जेक्ट पास करता है event.preventDefault()से कॉपी रोकी जा सकती हैevent.clipboardData.setData()से क्लिपबोर्ड में कस्टम डेटा रख सकते हैं- कॉपीराइट सुरक्षा, एनालिटिक्स, कस्टम फॉर्मेटिंग के लिए उपयोगी
उपयोग के मामले
- कॉपी किए गए टेक्स्ट में कॉपीराइट नोटिस जोड़ना
- कॉपी इवेंट ट्रैक करना (एनालिटिक्स)
- फॉर्मेटेड कॉपी (रिच टेक्स्ट, HTML) प्रदान करना
- संवेदनशील डेटा कॉपी होने से रोकना
उदाहरण: कॉपी में कॉपीराइट जोड़ना
document.addEventListener('copy', function(event) {
const selection = window.getSelection().toString();
if (selection.length > 50) {
const copyright = '\n\n© 2024 आपकी वेबसाइट. सर्वाधिकार सुरक्षित.';
event.clipboardData.setData('text/plain', selection + copyright);
event.preventDefault();
}
});
ब्राउज़र समर्थन
सभी आधुनिक ब्राउज़रों में समर्थित।