JavaScript Clipboard Tool Project part-2

 

✨ Advanced Clipboard Tool (with Live Preview & Fallback)

এখানে আমরা একটি উন্নত JavaScript Clipboard টুল বানাবো যা অটো-কপি, লাইভ পেস্ট প্রিভিউ এবং fallback সাপোর্ট রাখবে। প্রতিটি অংশের কোড ব্যাখ্যাও থাকবে পাশে।


<input type="text" id="autoInput" value="Focus করলে auto copy হবে">
ব্যাখ্যা:
➤ এই <input> ফিল্ডে আপনি ক্লিক বা ফোকাস করলেই লেখা কপি হবে।
➤ এটি ইউজার এক্সপেরিয়েন্স আরও মসৃণ করে।

<script>
document.getElementById("autoInput").addEventListener("focus", () => {
  const text = document.getElementById("autoInput");
  
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text.value)
      .then(() => console.log("Auto copied!"));
  } else {
    text.select();
    document.execCommand("copy");
    console.log("Fallback: execCommand used.");
  }
});
</script>
ব্যাখ্যা:
➤ focus ইভেন্টে Clipboard API দিয়ে কপি করা হয়।
➤ যদি API না চলে, তাহলে fallback হিসেবে execCommand() ব্যবহার করা হয়েছে।
➤ এই কোডটি পুরাতন ব্রাউজারেও কাজ করবে।

<button onclick="livePaste()">Live Paste</button>
<div id="livePreview" style="margin-top:10px; border:1px dashed #1565c0; padding:10px;"></div>
ব্যাখ্যা:
➤ Live Paste বাটনে ক্লিক করলে Clipboard থেকে লেখা পড়া হবে।
➤ সেই লেখাটি একটি <div> এ দেখানো হবে লাইভ প্রিভিউ হিসেবে।

<script>
function livePaste() {
  if (navigator.clipboard) {
    navigator.clipboard.readText()
      .then(text => {
        document.getElementById("livePreview").innerText = text;
      })
      .catch(err => {
        alert("Clipboard read error: " + err);
      });
  } else {
    alert("Clipboard API unsupported.");
  }
}
</script>
ব্যাখ্যা:
➤ Clipboard API এর readText() ব্যবহার করে ডেটা পড়া হয়।
➤ innerText ব্যবহার করে ডেটা livePreview <div> এ দেখানো হয়।

উপসংহার

এই উন্নত Clipboard টুলটি আধুনিক এবং পুরাতন ব্রাউজার উভয়কে সাপোর্ট করে। আপনি চাইলে এটিতে auto feedback, copy status icon, কিংবা theme customization যুক্ত করতে পারেন।

—

Leave a Reply