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

হ্যারি থিওডুলু

আধুনিক উপায়

অ্যাসিঙ্ক ক্লিপবোর্ড এপিআই ব্যবহার করে

ব্যবহারকারীর ক্লিপবোর্ড থেকে প্রোগ্রাম্যাটিকভাবে টেক্সট পড়ার জন্য, যেমন কোনো বাটনে ক্লিক করার পর, আপনি 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') ব্যবহার করে আপনি ক্লিপবোর্ডের কন্টেন্ট ইনসারশন পয়েন্টে (বর্তমানে ফোকাস করা HTML এলিমেন্টে) পেস্ট করতে পারেন। 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);
   }
});

আরও পড়ুন

ডেমো

এইচটিএমএল 

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