কিভাবে টেক্সট পেস্ট করতে হয়

Harry Theodoulou
LinkedIn

আধুনিক উপায়

Async ক্লিপবোর্ড API ব্যবহার করে

ব্যবহারকারীর ক্লিপবোর্ড থেকে পাঠ্য প্রোগ্রামগতভাবে পড়তে, উদাহরণস্বরূপ, একটি বোতাম ক্লিক করার পরে, আপনি Async ক্লিপবোর্ড 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
  • 13.1

উৎস

ক্লাসিক উপায়

document.execCommand() ব্যবহার করে

document.execCommand('paste') ব্যবহার করে আপনি ক্লিপবোর্ডের বিষয়বস্তু সন্নিবেশ বিন্দুতে পেস্ট করতে পারেন (বর্তমানে ফোকাস করা HTML উপাদান)। 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);
  }
});