Online Web Tutorial

Membuat Copy Clipboard dengan JQuery

Salah satu yang memudahkan bekerja dengan JQuery karena library yang lengkap. Meskipun kini bertebaran ibrary-library sejenis, mungkin diantara kamu masih tetap bertahan dengan library yang satu ini. Tutorial berikut akan membantumu membuat user atau pengunjung-mu mudah dalam menyalin code, link atau apapun tanpa harus melakukannya manual.

<script>$(document).ready(function(){
$(document).on('click', 'a.btn-copy', function(e){
    e.preventDefault();
    // btnName initialize the current click
    // textBox initialize textarea target
    // textBoxL count length value
    var btnName = $(this).attr('id'), textBox = document.getElementById('text-'+btnName), textBoxL = textBox.value.length;
    textBox.focus();
    textBox.setSelectionRange(0,textBoxL);
    document.execCommand('copy');
    $(this).after('Copied to clipboard');
    setTimeout(function(){
      $('.copied-clipboard').remove();
    }, 7000);
  });
});</script>

Nah code diatas seperti biasa letakan dibawah JQuery, sedangkan textbox nya seperti ini.

<textarea id="text-c1">https://www.fsodic.com</textarea> <a class="btn-copy" id="c1">Copy</a>