जावास्क्रिप्ट में क्लिपबोर्ड पर कॉपी करना: 3 कार्यशील तरीके

जावास्क्रिप्ट में क्लिपबोर्ड पर टेक्स्ट कॉपी करने के तीन तरीके: प्राचीन से आधुनिक तक

क्या आपने कभी सोचा है कि "कॉपी करें" बटन का जादू कैसे काम करता है? आप क्लिक करते हैं — और लिंक, कोड या प्रोमो कोड पहले से ही क्लिपबोर्ड पर होता है। बिना फ्लैश, बिना स्क्रॉल, बिना किसी अतिरिक्त हलचल के। यह, प्रतीत होने वाला सरल कार्य, Stack Overflow पर सबसे लोकप्रिय प्रश्नों में से एक है। और यह कोई संयोग नहीं है: जावास्क्रिप्ट में क्लिपबोर्ड पर कॉपी करने के कार्यान्वयन में कई खतरे, ब्राउज़र अंतर और वेब विकास के तीन पूरे युग छिपे हैं।

इस लेख में, हम जावास्क्रिप्ट का उपयोग करके क्लिपबोर्ड पर टेक्स्ट कॉपी करने के सभी तरीकों पर चर्चा करेंगे: पुराने और अच्छे (और लगभग मृत) document.execCommand से लेकर आधुनिक, एसिंक्रोनस navigator.clipboard तक। आप न केवल टेक्स्ट कॉपी करना सीखेंगे, बल्कि यह भी सीखेंगे कि इसे सुरक्षित, सुंदर और पुराने ब्राउज़रों के समर्थन के साथ कैसे करें। चलिए शुरू करते हैं!

क्लिपबोर्ड पर कॉपी करना "सरल" क्यों नहीं है

पहली नज़र में ऐसा लगता है: इसमें मुश्किल क्या है? टेक्स्ट लिया, क्लिपबोर्ड पर भेज दिया। लेकिन ब्राउज़र पैरानॉयड होते हैं। वे नहीं चाहते कि साइट पर कोई भी स्क्रिप्ट आपकी जानकारी के बिना क्लिपबोर्ड को पढ़ या लिख सके। कल्पना करें: आप एक साइट खोलते हैं, और वह पृष्ठभूमि में कॉपी किए गए पासवर्ड को "SendBitcoinToMe" से बदल देती है। डरावना, है ना?

इसलिए जावास्क्रिप्ट के सख्त नियम हैं: कॉपी करना केवल उपयोगकर्ता की सक्रिय कार्रवाई (क्लिक, कुंजी दबाना) पर ही संभव है। और इस शर्त के साथ भी — सभी API समान रूप से काम नहीं करते हैं। आइए समझते हैं।

तरीका नंबर 1: क्लासिक — document.execCommand('copy')

यह कैसे काम करता है

पहले, डायनासोर के युग में (लगभग 2020 से पहले), क्लिपबोर्ड पर टेक्स्ट कॉपी करने का एकमात्र तरीका execCommand के साथ एक ट्रिक था। विचार सरल है:

\n
• एक अस्थायी textarea या input बनाएँ।
\n
• उसमें आवश्यक टेक्स्ट रखें।
\n
• इसे (select() के माध्यम से) चुनें।
\n
• document.execCommand('copy') को कॉल करें।
\n
• अस्थायी तत्व को हटा दें।
\n

कोड में यह इस तरह दिखता है:

function copyToClipboardLegacy(text) {\n    // एक अस्थायी तत्व बनाएँ\n    const textarea = document.createElement('textarea');\n    textarea.value = text;\n    // इसे अदृश्य बनाएँ\n    textarea.style.position = 'fixed';\n    textarea.style.opacity = '0';\n    document.body.appendChild(textarea);\n    // टेक्स्ट चुनें\n    textarea.select();\n    textarea.setSelectionRange(0, 99999); // मोबाइल उपकरणों के लिए\n    // कॉपी करें\n    try {\n        const successful = document.execCommand('copy');\n        if (successful) {\n            console.log('टेक्स्ट कॉपी हो गया!');\n        } else {\n            console.error('कॉपी करना विफल');\n        }\n    } catch (err) {\n        console.error('कॉपी करने में त्रुटि:', err);\n    }\n    // सफाई करें\n    document.body.removeChild(textarea);\n}

फायदे और नुकसान

फायदे: Internet Explorer 9 में भी काम करता है। अनुमति की आवश्यकता नहीं है।

नुकसान: इसे पुराना (deprecated) माना जाता है। सिंक्रोनस — कॉपी करने तक मुख्य थ्रेड को ब्लॉक करता है। बड़ी मात्रा में डेटा कॉपी करना असुविधाजनक है। और सबसे महत्वपूर्ण बात — आधुनिक ब्राउज़रों में इसे कभी भी हटाया जा सकता है।

सलाह: यदि आप एक नया प्रोजेक्ट लिख रहे हैं — execCommand का उपयोग न करें। लेकिन बहुत पुराने ब्राउज़रों (IE11, पुराना Edge) के समर्थन के लिए यह एकमात्र विकल्प है।

तरीका नंबर 2: आधुनिक — Clipboard API (navigator.clipboard)

यह कैसे काम करता है

पुराने तरीकों की जगह Clipboard API आया — एसिंक्रोनस, सुरक्षित और लचीला। यह navigator.clipboard ऑब्जेक्ट में रहता है और न केवल लिख सकता है, बल्कि (उपयोगकर्ता की अनुमति से) क्लिपबोर्ड से पढ़ भी सकता है।

कॉपी करने के लिए writeText() विधि का उपयोग किया जाता है:

async function copyToClipboardModern(text) {\n    try {\n        await navigator.clipboard.writeText(text);\n        console