Cara Copy text dengan clipboard.js

Sekarang saya akan membuat tutorial cara copy text dengan menggunkan plugins jquery clipboard.js. plugins ini sudah umum digunakan oleh website-website lain, dengan proses copy text yang sangat simple tampa harus memblock text yang akan di copy 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 menggunakan untuk web komersil anda. untuk lebih lanjut berikut tutorialnya.

1. Download plugin  Clipboard.js disini atau melalui github.

2. Extract plugin  Clipboard.js pada folder project anda.

4. Buatlah link extension untuk memanggil Clipboard.js untuk nama folder sesuai selera masing-masing.  

<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> 

5. Buat lah sebuah input text yang akan kita copy, seperti contoh dibawah ini

<div class="input-group input-group-md">
   <input id="foo" class="form-control" value="https://cahbagusnongkrong.blogspot.co.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 berikut.

$('.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 kita jalankan jika berhasil maka hasil nya seperti ini .


8. Jika anda ingin membuat cut text anda bisa menambahkan script berikut.

<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, anda tidak perlu menekan ctrl + C lagi pada keyboard anda, cukup tekan klik lalu paste. sekian tutorial dari saya semoga bermanfaat.

Demo