Membuat Copy text dengan clipboard.js dengan mudah

Disini saya akan membahas tentang cara copy text dengan menggunkan plugins jquery clipboard.js. plugins ini sudah umum digunakan oleh beberapa website lain, dengan proses copy text yang sangat simple dan mudah tanpa harus memblock text yang akan di copy, cara copy textnya hanya cukup menekan tombol copy maka text akan otomatis tercopy lalu tinggal di paste. plugins ini dibuat oleh Zeno Rocha dengan Licensi MIT jadi anda bisa menggunakannya untuk web komersil kalian. untuk lebih jelas nya mari kita bahas tutorialnya di bawah ini.

Cara Mudah membuat Copy text dengan clipboard.js

<script type="text/javascript" src="assets/plugins/clipboardjs/clipboard.js"></script>    
<script type="text/javascript" src="assets/js/jquery-2.2.3.min.js"></script> 

<div class="input-group input-group-md">
   <input id="foo" class="form-control" value="https://www.kucluk.id/">
   <span class="input-group-btn">
      <button class="btn_copy btn" data-clipboard-target="#foo">
         <i class="fa fa-clipboard" aria-hidden="true"></i>
      </button>
  </span>
</div>

6. Lalu tambahkan script Jquery seperti dibawah ini.

$('.btn_copy').tooltip({
  trigger: 'click',
  placement: 'bottom'
});
function setTooltip(message) {
  $('.btn_copy').tooltip('hide')
    .attr('data-original-title', message)
    .tooltip('show');
}
function hideTooltip() {
  setTimeout(function() {
    $('.btn_copy').tooltip('hide');
  }, 2000);
}
var clipboard = new Clipboard('.btn_copy');
clipboard.on('success', function(e) {
  setTooltip('Copied!');
  hideTooltip();
});
clipboard.on('error', function(e) {
  setTooltip('Failed!');
  hideTooltip();
});

7. Jika sudah, lalu kita jalankan dan jika berhasil maka hasil nya akan seperti gambar di bawah ini.

8. Jika kalian ingin membuat cut text, kalian bisa menambahkan script dibawah ini.

<textarea id="bar" rows="5">Isi dengan text anda</textarea><br/>
<button class="btn_copy btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut data text</button>

Bagaimana mudahkan cara mengimplementasikannya, kalian tidak perlu lagi menekan CTRL + C lagi pada keyboard kalian, cukup tekan klik lalu paste. sekian tutorial dari saya semoga bermanfaat.