Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML oncopy इवेंट एट्रिब्यूट

परिचय

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();
  }
});

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़रों में समर्थित।

  1. HTML ondragenter इवेंट एट्रिब्यूट HTML ondragenter इवेंट एट्रिब्यूट

    विवरण HTML ondragenter इवेंट एट्रिब्यूट HTML दस्तावेज़ में जब कोई ड्रैगेबल तत्व या टेक्स्ट एक वैध ड्रॉप टारगेट में प्रवेश करता है, तब ट्रिगर होता है। सिंटैक्स <tagname ondragenter=script></tagname> उदाहरण आइए HTML ondragenter इवेंट एट्रिब्यूट का एक उदाहरण देखें: <!DOCTYPE html>

  1. HTML ondragend इवेंट एट्रिब्यूट HTML ondragend इवेंट एट्रिब्यूट

    विवरण HTML ondragend इवेंट एट्रिब्यूट HTML दस्तावेज़ में जब उपयोगकर्ता किसी HTML तत्व के एलिमेंट या टेक्स्ट को ड्रैग करना समाप्त करता है, तब ट्रिगर होता है। सिंटैक्स <tagname ondragend=script></tagname> उदाहरण आइए HTML ondragend इवेंट एट्रिब्यूट का एक उदाहरण देखें: <!DOCTYPE html&g

  1. HTML onpageshow इवेंट एट्रिब्यूट HTML onpageshow इवेंट एट्रिब्यूट

    विवरण HTML onpageshow इवेंट एट्रिब्यूट तब ट्रिगर होता है जब उपयोगकर्ता किसी वेबपेज पर नेविगेट करता है। सिंटैक्स <body onpageshow=script></body> उदाहरण आइए HTML onpageshow इवेंट एट्रिब्यूट का एक उदाहरण देखें: <!DOCTYPE html> <html> <style> body { color: #000;