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

टेक्स्ट को चिपकाने का तरीका

Harry Theodoulou

क्लिपबोर्ड से डेटा कॉपी करने का नया तरीका

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

प्रोग्राम के ज़रिए, उपयोगकर्ता के क्लिपबोर्ड से टेक्स्ट पढ़ने के लिए, Async Clipboard API के readText() तरीके का इस्तेमाल किया जा सकता है. उदाहरण के लिए, बटन पर क्लिक करने के बाद. अगर क्लिपबोर्ड से डेटा पढ़ने की अनुमतियां अब तक नहीं दी गई हैं, तो navigator.clipboard.readText() को कॉल करने पर, इस तरीके को पहली बार कॉल करने पर अनुमति का अनुरोध किया जाएगा.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard');
   }
});

Browser Support

Source

क्लिपबोर्ड से डेटा कॉपी करने का पुराना तरीका

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

document.execCommand('paste') का इस्तेमाल करके, क्लिपबोर्ड के कॉन्टेंट को इंसर्शन पॉइंट (फ़िलहाल फ़ोकस किया गया एचटीएमएल एलिमेंट) पर चिपकाया जा सकता है. execCommand तरीका, बूलियन वैल्यू दिखाता है. इससे पता चलता है कि paste इवेंट पूरा हुआ या नहीं. हालांकि, इस तरीके की कुछ सीमाएं हैं. उदाहरण के लिए, यह तरीका सिंक्रोनस है. इसलिए, ज़्यादा डेटा चिपकाने पर, पेज ब्लॉक हो सकता है.

pasteButton.addEventListener('click', () => {
  document.querySelector('textarea').focus();
  const result = document.execCommand('paste')
  console.log('document.execCommand result: ', result);
})

Browser Support

Source

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

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard. Using execCommand instead.');
     document.querySelector('textarea').focus();
     const result = document.execCommand('paste')
     console.log('document.execCommand result: ', result);
   }
});

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

डेमो

HTML

<!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 paste text</title>
  </head>
  <body>
    <h1>How to paste text</h1>
    <p>
      <button type="button">Paste</button>
    </p>
    <textarea></textarea>
  </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 pasteButton = document.querySelector('button');

pasteButton.addEventListener('click', async () => {
  try {
    const text = await navigator.clipboard.readText()
    document.querySelector('textarea').value += text;
    console.log('Text pasted.');
  } catch (error) {
    console.log('Failed to read clipboard. Using execCommand instead.');
    document.querySelector('textarea').focus();
    const result = document.execCommand('paste')
    console.log('document.execCommand result: ', result);
  }
});