टेक्स्ट कॉपी करने का तरीका

जो मेडले
जो मेडली
Twitter GitHub

टेक्स्ट को काटना और चिपकाना सामान्य रूप से और खास तौर पर डेस्कटॉप ऐप्लिकेशन की सबसे ज़्यादा इस्तेमाल की जाने वाली सुविधाओं में से एक है. मैं वेब पर टेक्स्ट कैसे कॉपी करूं? इसमें एक नया और पुराना तरीका है. और यह इस बात पर निर्भर करता है कि किस ब्राउज़र का इस्तेमाल किया जाता है.

आधुनिक तरीका

Async Clipboard API का इस्तेमाल करना

Clipboard.writeText() वाला तरीका, एक स्ट्रिंग लेता है और एक प्रॉमिस दिखाता है. यह प्रॉमिस तब रिज़ॉल्व होता है, जब टेक्स्ट को क्लिपबोर्ड पर लिखा जाता है. Clipboard.writeText() को सिर्फ़ ऐसे window ऑब्जेक्ट से इस्तेमाल किया जा सकता है जिसमें फ़ोकस हो.

ब्राउज़र सहायता

  • 66
  • 79
  • 63
  • 13.1

सोर्स

क्लासिक तरीका

document.execCommand() का इस्तेमाल करना

document.execCommand('copy') को कॉल करने से एक बूलियन वैल्यू मिलती है, जिससे पता चलता है कि कॉपी हुई या नहीं. इस कमांड को क्लिक हैंडलर जैसे किसी उपयोगकर्ता जेस्चर के अंदर कॉल करें. Async Clipboard API से तुलना करने पर, इस तरीके की कुछ सीमाएं हैं. execCommand() तरीका सिर्फ़ DOM एलिमेंट के साथ काम करता है. यह सिंक्रोनस होता है, इसलिए ज़्यादा डेटा को कॉपी करने से, पेज ब्लॉक हो सकता है. खास तौर पर, ऐसा डेटा जिसे पूरी तरह से बदला जाना चाहिए या साफ़ किया जाना चाहिए.

ब्राउज़र सहायता

  • 1
  • 12
  • 1
  • 1.3

सोर्स

प्रोग्रेसिव एन्हैंसमेंट

const copyButton = document.querySelector('#copyButton');
const out = document.querySelector('#out');

if ('clipboard' in navigator) {
  copyButton.addEventListener('click', () => {
    navigator.clipboard.writeText(out.value)
    .then(() => {
      console.log('Text copied');
    })
    .catch((err) => console.error(err.name, err.message));
  });
} else {
  copyButton.addEventListener('click', () => {
    const textArea = document.createElement('textarea');
    textArea.value = out.value;
    textArea.style.opacity = 0;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    try {
      const success = document.execCommand('copy');
      console.log(`Text copy was ${success ? 'successful' : 'unsuccessful'}.`);
    } catch (err) {
      console.error(err.name, err.message);
    }
    document.body.removeChild(textArea);
  });
}

इसके बारे में और पढ़ें

डेमो

एचटीएमएल

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to copy text</title>
  </head>
  <body>
    <h1>How to copy text</h1>
    <textarea rows="3">
Some sample text for you to copy. Feel free to edit this.</textarea
    >
    <button type="button">Copy</button>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

button {
  display: block;
}

JS


        const textarea = document.querySelector('textarea');
const button = document.querySelector('button');

button.addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText(textarea.value);
  } catch (err) {
    console.error(err.name, err.message);
  }
});