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

জো মেডলি
Joe Medley
GitHub

টেক্সট কাটিং এবং পেস্ট করা হল অ্যাপগুলির সাধারণভাবে ব্যবহৃত বৈশিষ্ট্যগুলির মধ্যে একটি এবং বিশেষ করে ডেস্কটপ অ্যাপ্লিকেশন৷ আমি কিভাবে ওয়েবে টেক্সট কপি করব? একটি পুরানো উপায় এবং একটি নতুন উপায় আছে. এবং এটি কোন ব্রাউজার ব্যবহার করা হয় তার উপর নির্ভর করে।

আধুনিক উপায়

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

Clipboard.writeText() পদ্ধতি একটি স্ট্রিং নেয় এবং একটি প্রতিশ্রুতি প্রদান করে যা ক্লিপবোর্ডে পাঠ্য সফলভাবে লেখা হলে সমাধান করে। Clipboard.writeText() শুধুমাত্র window অবজেক্ট থেকে ব্যবহার করা যেতে পারে যেখানে ফোকাস আছে।

ব্রাউজার সমর্থন

  • 66
  • 79
  • 63
  • 13.1

উৎস

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

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

document.execCommand('copy') কল করা একটি বুলিয়ান মান প্রদান করে যা নির্দেশ করে যে অনুলিপিটি সফল হয়েছে কিনা। ব্যবহারকারীর অঙ্গভঙ্গির ভিতরে এই কমান্ডটি কল করুন যেমন একটি ক্লিক হ্যান্ডলার । Async ক্লিপবোর্ড API এর সাথে তুলনা করার সময় এই পদ্ধতির সীমাবদ্ধতা রয়েছে। execCommand() পদ্ধতি শুধুমাত্র DOM উপাদানের সাথে কাজ করে। এটি সিঙ্ক্রোনাস হওয়ার কারণে, প্রচুর পরিমাণে ডেটা অনুলিপি করা, বিশেষত ডেটা যা অবশ্যই কোনওভাবে রূপান্তরিত বা স্যানিটাইজ করা উচিত, পৃষ্ঠাটিকে ব্লক করতে পারে।

ব্রাউজার সমর্থন

  • 1
  • 12
  • 1
  • 1.3

উৎস

প্রগতিশীল বর্ধিতকরণ

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

জেএস


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