টেক্সট কাটিং এবং পেস্ট করা হল অ্যাপগুলির সাধারণভাবে ব্যবহৃত বৈশিষ্ট্যগুলির মধ্যে একটি এবং বিশেষ করে ডেস্কটপ অ্যাপ্লিকেশন৷ আমি কিভাবে ওয়েবে টেক্সট কপি করব? একটি পুরানো উপায় এবং একটি নতুন উপায় আছে. এবং এটি কোন ব্রাউজার ব্যবহার করা হয় তার উপর নির্ভর করে।
আধুনিক উপায়
Async ক্লিপবোর্ড API ব্যবহার করে
Clipboard.writeText()
পদ্ধতি একটি স্ট্রিং নেয় এবং একটি প্রতিশ্রুতি প্রদান করে যা ক্লিপবোর্ডে পাঠ্য সফলভাবে লেখা হলে সমাধান করে। Clipboard.writeText()
শুধুমাত্র window
অবজেক্ট থেকে ব্যবহার করা যেতে পারে যেখানে ফোকাস আছে।
ক্লাসিক উপায়
document.execCommand()
ব্যবহার করে
document.execCommand('copy')
কল করা একটি বুলিয়ান মান প্রদান করে যা নির্দেশ করে যে অনুলিপিটি সফল হয়েছে কিনা। ব্যবহারকারীর অঙ্গভঙ্গির ভিতরে এই কমান্ডটি কল করুন যেমন একটি ক্লিক হ্যান্ডলার । Async ক্লিপবোর্ড API এর সাথে তুলনা করার সময় এই পদ্ধতির সীমাবদ্ধতা রয়েছে। execCommand()
পদ্ধতি শুধুমাত্র DOM উপাদানের সাথে কাজ করে। এটি সিঙ্ক্রোনাস হওয়ার কারণে, প্রচুর পরিমাণে ডেটা অনুলিপি করা, বিশেষত ডেটা যা অবশ্যই কোনওভাবে রূপান্তরিত বা স্যানিটাইজ করা উচিত, পৃষ্ঠাটিকে ব্লক করতে পারে।
প্রগতিশীল বর্ধিতকরণ
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);
}
});