Copy to clipboard simple javascript

খুব সহজে কিভাবে কপি টু ক্লিপবোর্ড অপশনটি আপনার ওয়েবসাইটে  যুক্ত করবেন ।  গুগোল এ কপি টু ক্লিপবোর্ড এর সোর্স কোড পাওয়ার জন্য সার্চ করলে দেখবেন অনেকগুলো রেজাল্ট দেখাবে কিন্তু এর মধ্যে অধিকাংশই অতিরিক্ত জাভাস্ক্রিপ্ট এবং  অপ্রয়োজনীয়' সিএসএস দ্বারা নির্মিত কোডগুলো পাবেন ।

কোডগুলো দেখার  পূর্বে আসুন আগে জেনে নেয়া যাক Copy to clipboard মূলত কি কি কাজে ব্যবহার করা হয় । ধরে নিন আপনার ওয়েবসাইটে কোন একটি থার্ড পার্টি  লিংক আপনার পোস্টের মধ্যে অন্তর্ভুক্ত করেছেন  যে লিঙ্কটি ভিজিটরগন  কপি করে রাখবে  এক্ষেত্রে  আপনি Copy to clipboard  অপশনটি সংযুক্ত করে দিতে পারেন যাতে করে ভিজিটরের খুব সহজে আপনার দেওয়া লিঙ্কটি কপি করে নিতে পারে । এছাড়াও আমরা অনেক সময় এমন কিছু কনটেন্ট ভিজিটর দের উদ্দেশ্যে প্রকাশ করে যেগুলো মূলত কপি করে সংরক্ষণ করে রাখার প্রয়োজন পড়ে  যেমনঃ  জন্মদিনের উইশ মেসেজ,  নতুন বছরের শুভেচ্ছা সংক্রান্ত মেসেজ,  ইত্যাদি ।  এক্ষেত্রেও Copy to clipboard  অপশনটি সংযুক্ত করা লাগে  এটা না করলে আপনার ওয়েবসাইটের ভিজিটগন অধিকাংশ ক্ষেত্রে বিরক্ত হয়ে পড়বে ।  কিন্তু তারা যদি একটি ক্লিকে  পূর্ণাঙ্গ  টেক্সট  কপি করার সুযোগ পায় সে ক্ষেত্রে আপনার ওয়েবসাইটে তাদের অবস্থান চলমান থাকবে । 

Html Section:

<textarea id="copytext-1" readonly>
 Add TEXT Here
</textarea>
<br>
<button id="copybtn-1">Copy Text</button>

 

জাভাস্ক্রিপ্ট  কোডগুলো  আপনার ওয়েবসাইটে যেখানে  এইচটিএমএল  সংযুক্ত করার অপশন আছে  সেখানে  সংযুক্ত করলেই হবে ।  যারা  ব্লগার  ব্যবহার করেন তারা ব্লগার থিম এর মধ্যে  একদম শেষে closing Body Tag </body> এর উপরে সংযুক্ত করে দিবেন ।

JavaScript Section:

  <script>
  // HTML BOx JS Code
    let TextBox = document.getElementById("copytext-1");
    let CopyButton = document.getElementById("copybtn-1");

    CopyButton.onclick = function() {
      TextBox.select();
      document.execCommand("copy");
      CopyButton.innerText = "Copied successfully"
    }
  </script>

শুধুমাত্র Copy to clipboard  তৈরি করার জন্য ওপরের  Html Section:   এবং JavaScript Section: যথেষ্ট ।  কিন্তু সৌন্দর্য এবং স্টাইল  সংযুক্ত করার জন্য  নিচের  সিএসএস  অংশ  সংযুক্ত করতে হবে । এটা  অপশনাল  আপনি যদি মনে করেন আপনার ওয়েবসাইটের Copy to clipboard  অংশটি  একটু ভিন্ন দেখাবে সে ক্ষেত্রে আপনি  অতিরিক্ত  সিএসএস  কোড এর মাধ্যমে নিজের মতো করে স্টাইল করে নিতে পারবেন ।

CSS Section:

<style>
/*-- clipboard and copy button --*/
.copy-1{
    width: 100%;
    height:200px;
    border: 1px solid #ffd40082;
    border-radius: 5px;
    background: #fbb9000d;
}
.copybtn-1{
    background: #e9f442b0;
    cursor: pointer;
    height: 30px;
    border-radius: 5px;
    color: blue;
    border: 1px solid lightgrey;
}
.copybtn-1:hover{
    background: #76f44280;
}
</style>