Copy All Sections with One Click (JavaScript + Toast)
নিচের উদাহরণে একটি textarea ও একটি Copy All বাটন থাকবে। ক্লিক করলেই পুরো টেক্সট কপি হবে এবং স্ক্রিনে একটি নোটিফিকেশন দেখাবে।
<textarea id="allText" rows="6" style="width:100%;">
এই সব টেক্সট এক ক্লিকে কপি হবে।
✅ JavaScript দিয়ে Clipboard API ব্যবহার করা হয়েছে।
✅ Copy All Sections ফিচার যুক্ত করা হয়েছে।
</textarea>
<button onclick="copyAllText()" style="margin-top:10px;">Copy All</button>
|
ব্যাখ্যা:
➤ <textarea> ট্যাগের মধ্যে কন্টেন্ট রাখা হয়েছে যেটা কপি হবে।
➤ Copy All বাটনে ক্লিক করলে copyAllText() ফাংশন চালু হবে। |
<script>
function copyAllText() {
const textarea = document.getElementById("allText");
navigator.clipboard.writeText(textarea.value)
.then(() => {
showToast("✅ সব কিছু কপি হয়েছে!");
})
.catch(err => {
alert("❌ সমস্যা হয়েছে: " + err);
});
}
function showToast(message) {
const toast = document.createElement("div");
toast.innerText = message;
toast.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
background: #00796b;
color: white;
padding: 10px 20px;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
font-weight: bold;
z-index: 9999;
`;
document.body.appendChild(toast);
setTimeout(() => {
toast.remove();
}, 2500);
}
</script>
|
ব্যাখ্যা:
➤ copyAllText() ফাংশন Clipboard API দিয়ে টেক্সট কপি করে।
➤ সফল হলে showToast() কল হয় এবং একটি temporary toast দেখায়।
➤ setTimeout দিয়ে ২.৫ সেকেন্ড পরে নোটিফিকেশনটি মুছে ফেলা হয়। |
আপনি এটি কীভাবে ব্যবহার করতে পারেন?
এই কোডটি আপনার WordPress HTML Editor-এ বসালেই আপনি পাবেন একটি কার্যকর Copy All ফিচারসহ টেক্সট কপি করার অপশন। এই ফিচারটি বড় টেক্সট বা কোড ব্লক কপি করার ক্ষেত্রে খুবই উপযোগী।