How To Make Copy Clipboard Text Box

 How To Make Copy Clipboard Text Box

আমার মতো আপনারা যারা ব্লগিং করেন, বা টিউটোরিয়াল পোষ্ট করেন তাদের ছোট-বড় কিছু Script দিতে হয় যেটি কপি করে ক্লাইন্ট সহজে ব্যাবহার করতে পারে। এখানেই আমরা কিছু সমস্যার সম্মুখিন হই।

সমস্যাঃ

১. এই সমস্যাটি সকলেরই হয়ে থাকে যে আপনি যে কোড গুলো দেন তা ক্লাইন্ট সবসময় সঠিকভাবে কপি করতে পারেনা  । কিছু কোড কম বা কিছু পোস্ট সহ কপি করে ফেলে তাই কোডটি সঠিকভাবে কাজ করেনা।

২. বড় কোন কোড কপি করতে হয়রানির স্বীকার হতে হয়।

৩. যারা কন্টেন্ট চুরি ঠেকাতে রাইট ক্লিক, কপি পেস্ট এবং সিলেক্টর ডিজেবল রেখেছেন তাদের দেওয়া কোড গুলোও ক্লাইন্ট কপি করতে পারেনা।

রাইট ক্লিক, কপি পেস্টে এবং পেইজ সোর্স ডিজেবল করতে হয় কিভাব তা জানতে এখানে ক্লিক করুন ।     

সিলেক্টর ডিজেবল করতে হয় কিভাবে তা জানতে এখানে ক্লিক করুন ।   

 

সমাধানঃ

উপরে উল্লেখিত সকল সমস্যার সমাধানের জন্য আছে কপি ক্লিপবোর্ড যুক্ত টেক্সট বক্স। এর সাহায্যে বিশাল আকৃতির কোডও এক ক্লিকে কপি হবে রাইট ক্লিক, কপি পেস্ট এবং সিলেক্টর ডিজেবল তাকলেও

কোডঃ

<style>

  .mainbox{

   position: relative;

  }

  .maintextbox{

   border: 3px solid blue;

   background-color: black;

  }

  .js-textbox{

    height: 400px;

    color: white;

    white-space: pre;

    margin-left: 15px;

    overflow: scroll;

  }

  .mainbox .js-copybutton{

    position: absolute;

    bottom: 30px;

    right: 30px;

    height: 45px;

    width: 45px;

    border: 2px solid skyblue;

    border-radius: 50px;

    background-color: blue;

    display: inline-block;

  }

  .js-copybutton:hover{

   background-color: green;

     }

</style>

  <div class="mainbox">

  <div class="maintextbox">

  <div class="js-textbox">

এখানে লেখা বা পেস্ট করা কোড সবাই কপি করতে পারবে

  </div>

  </div>

      <button class="js-copybutton"><span style="font-size: 0.875em; left: -0.125em; margin-right: 0.125em; position: relative; top: -0.25em;">

  📄<span style="left: 0.25em; position: absolute; top: 0.25em;">📄</span></span>

      </button>

    </div>

<script>

  var copyCopybutton = document.querySelector('.js-copybutton');  

copyCopybutton.addEventListener('click', function(event) {  

  // Select the box text  

  var textbox = document.querySelector('.js-textbox');  

  var range = document.createRange();  

  range.selectNode(textbox);  

  window.getSelection().addRange(range);  

  try {  

    // Now that we've selected the box text, execute the copy command  

    var successful = document.execCommand('copy');  

    var msg = successful ? 'successful' : 'unsuccessful';  

    console.log('Copy email command was ' + msg);  

  } catch(err) {  

    console.log('Oops, unable to copy');  

  }  

  // Remove the selections - NOTE: Should use

  // removeRange(range) when it is supported  

  window.getSelection().removeAllRanges();  

});

</script>

বক্সের মধ্যে কিভাবে html, css এবং javascript লিখে দেখাতে হয় তা জানতে এখানে ক্লিক করুন