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

हैरी थेओडोलू
हैरी थियोडोलू

उपयोगकर्ता के क्लिपबोर्ड से, प्रोग्राम के हिसाब से टेक्स्ट पढ़ने के लिए, जैसे कि किसी बटन पर क्लिक करने के बाद, 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');
   
}
});

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

  • 66
  • 79
  • x
  • 13.1

सोर्स

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

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

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

  • 1
  • 12
  • 1
  • 1.3

सोर्स

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

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

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

डेमो

<!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>

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

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