Cara Copy text dengan clipboard.js - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Cara Copy text dengan clipboard.js, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel jQuery, Artikel website, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Copy text dengan clipboard.js
link : Cara Copy text dengan clipboard.js

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

Demikianlah Artikel Cara Copy text dengan clipboard.js

Sekianlah artikel Cara Copy text dengan clipboard.js kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Copy text dengan clipboard.js dengan alamat link https://dev-create.blogspot.com/2017/09/cara-copy-text-dengan-clipboardjs.html