Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

Joe Medley

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

मॉडर्न तरीका

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

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

Browser Support

Source

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

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

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

Browser Support

Source

परतदार वृद्धि

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>

सीएसएस


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