এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

Joe Medley

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

আধুনিক উপায়

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

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

Browser Support

Source

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

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

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

Browser Support

Source

প্রগতিশীল উন্নয়ন

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