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>

 Peringatan: document.execCommand() berstatus depracted atau usang pada browser firefox v82 keatas dan masih berjalan pada browser chrome hingga saat ini (v90 ketika tulisan ini disunting terakhir)