आज के डिजिटल युग में जब भी हम किसी वेबसाइट या टूल पर जाते हैं, तो अक्सर वहां एक बटन दिखता है – “कॉपी करें”। जैसे ही हम उस बटन पर क्लिक करते हैं, टेक्स्ट क्लिपबोर्ड में कॉपी हो जाता है। यह एक बेहद सामान्य लेकिन ज़रूरी फीचर बन चुका है, खासकर टेक्निकल ब्लॉग, कोड शेयरिंग वेबसाइट्स और ऑनलाइन टूल्स में।
इस पोस्ट में हम जानेंगे कि कैसे आप बिल्कुल सिंपल JavaScript का उपयोग करके एक कॉपी टू क्लिपबोर्ड फीचर बना सकते हैं, वह भी बिना किसी लाइब्रेरी के।
Copy to Clipboard क्यों ज़रूरी है?
यदि आप कोई वेबसाइट चला रहे हैं जहाँ यूज़र को कोई टेक्स्ट, कोड, या लिंक कॉपी करने की ज़रूरत पड़ती है, तो मैनुअल सिलेक्शन और राइट-क्लिक से बचने के लिए एक “Copy” बटन देना यूज़र एक्सपीरियंस को बेहतर बनाता है।
इसके साथ ही, यह सुविधा मोबाइल यूज़र्स के लिए भी बहुत फायदेमंद साबित होती है, जहां टेक्स्ट सेलेक्ट करना थोड़ा कठिन होता है।
JavaScript से Copy करने का सिंपल तरीका
अब आइए जानते हैं कि JavaScript के ज़रिए हम ये फीचर कैसे बना सकते हैं। नीचे एक सिंपल HTML और JavaScript कोड है जो ये काम करता है।
HTML कोड:
<textarea id="myText">यह एक उदाहरण टेक्स्ट है जिसे आप कॉपी कर सकते हैं।</textarea>
<button onclick="copyText()">कॉपी करें</button>
<p id="status"></p>
JavaScript कोड:
function copyText() {
const textElement = document.getElementById("myText");
textElement.select();
textElement.setSelectionRange(0, 99999); // मोबाइल ब्राउज़र्स के लिए
try {
const success = document.execCommand("copy");
if (success) {
document.getElementById("status").innerText = "टेक्स्ट सफलतापूर्वक कॉपी हो गया।";
} else {
document.getElementById("status").innerText = "कॉपी नहीं हो सका।";
}
} catch (err) {
document.getElementById("status").innerText = "कुछ गलत हो गया।";
}
// सेलेक्शन हटाने के लिए
window.getSelection().removeAllRanges();
}
कैसे काम करता है यह कोड?
- सबसे पहले हमने एक
<textarea>बनाया है जिसमें कोई टेक्स्ट लिखा हुआ है। - एक बटन है जिस पर क्लिक करने से
copyText()नामक JavaScript फंक्शन चलता है। - JavaScript में
select()औरsetSelectionRange()के ज़रिए टेक्स्ट को सेलेक्ट किया जाता है। - फिर
document.execCommand("copy")कमांड से टेक्स्ट क्लिपबोर्ड में चला जाता है। - एक स्टेटस मैसेज यूज़र को दिखाने के लिए नीचे
<p>टैग है जिसे स्क्रिप्ट अपडेट करती है।
नया तरीका: navigator.clipboard API
अगर आप थोड़ी नई ब्राउज़र सपोर्ट चाहते हैं और सिंपल तरीका अपनाना चाहते हैं, तो आप navigator.clipboard.writeText() का भी इस्तेमाल कर सकते हैं।
उदाहरण:
<textarea id="myText">यह एक नया तरीका है टेक्स्ट कॉपी करने का।</textarea>
<button onclick="copyText()">कॉपी करें</button>
<p id="status"></p>
function copyText() {
const text = document.getElementById("myText").value;
navigator.clipboard.writeText(text)
.then(() => {
document.getElementById("status").innerText = "टेक्स्ट सफलतापूर्वक कॉपी हो गया।";
})
.catch(() => {
document.getElementById("status").innerText = "कॉपी करने में दिक्कत हुई।";
});
}
ध्यान रखने योग्य बातें
- पुराना तरीका (
execCommand) अब कुछ ब्राउज़र्स में deprecated हो सकता है, लेकिन अभी भी बहुत जगह काम करता है। - नया तरीका (
navigator.clipboard) ज़्यादा सुरक्षित और क्लीन है, लेकिन इसके लिए HTTPS कनेक्शन ज़रूरी होता है। - यदि आप मोबाइल और पुराने ब्राउज़र्स को भी टारगेट कर रहे हैं, तो पुराना तरीका ज़्यादा व्यापक सपोर्ट देता है।
निष्कर्ष
Copy to Clipboard जैसी छोटी लेकिन उपयोगी JavaScript ट्रिक से आप अपने यूज़र को बेहतर अनुभव दे सकते हैं। यह न केवल आपके टूल्स या कंटेंट को ज़्यादा प्रोफेशनल बनाता है, बल्कि मोबाइल फ्रेंडली भी बनाता है। ऊपर दिए गए दोनों तरीकों को आप अपनी ज़रूरत के हिसाब से उपयोग में ले सकते हैं।
अगर आपको यह ट्रिक पसंद आई हो और आप ऐसे ही और JavaScript ट्रिक्स सीखना चाहते हैं, तो इस कैटेगरी को ज़रूर फॉलो करें।
Also Read:- Defer और Async क्या है? HTML पेज में JavaScript को जोड़ते समय इसका इस्तेमाल क्यों किया जाता है
