Jquery İle Panoya Kopyalama İşlemi

Bu uygulamanın kullanıldığı en güzel örnek sanırım hesap numaraları sayfasındaki iban kopyalama özelliği. Gelin bunu nasıl yaptığımızı gösterelim.

<td>TR9876543210987654 <span class="panoya-kopyala" title="TR9876543210987654"><span class="icon-edit-copy"></span> </span></td>

td içerisindeki iban bizim gördüğümüz ancak kopyalanan asıl alan title etiketinin içindeki iban olacak.

  $(document).on('click','.panoya-kopyala',function(e){
    let link = this.getAttribute('title');
    let $temp = $("<input>");
    $("body").append($temp);
    $temp.val(link).select();
    document.execCommand("copy");
    $temp.remove();
  });

Kopyalama işleminin ardından ilgili sayfadaki gibi müzik çaldırmak ve sweet alert uyarısı verdirmek istiyorsanız, sweet alert kütüphanesini sitenize dahil ettikten sonra ve bir kopyalama işlemi müziği ekledikten sonra aşağıda ki son halini kullanabilirsiniz.

  $(document).on('click','.panoya-kopyala',function(e){
    let link = this.getAttribute('title');
    let $temp = $("<input>");
    let sound = new Audio("copy.mp3");
    $("body").append($temp);
    $temp.val(link).select();
    document.execCommand("copy");
    $temp.remove();
    swal({
      title: "Kopyalandı",
      text: "IBAN başarılı bir şekilde kopyalandı.",
      type: "success",
      timer: 1000,
      showConfirmButton: false
    });
    sound.play()
  });

Butona tıklandığında kopyalama işlemleri için daha kolay bir başka yöntem;

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

Clipboard sayfasına ulaşıp en güncel cdn adresini almak için https://clipboardjs.com/

Kullanım;

Başlatmak için classımız.

new ClipboardJS('.btn');

Yukarıda ki kod tek başına yeterli ancak kopyalama işlemlerinden sonra bir şey tetiklemek bir işlem yaptırmak istiyorsanız. Aşağıda ki gibi başlatınız.

let clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

	//BAŞARILIYSA BU ALANDA İŞLEMLERİMİZİ YAPTIRABİLİRİZ.
    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
    //BAŞARISIZSA BU ALANDA İŞLEMLERİMİZİ YAPTIRABİLİRİZ.
});

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">


<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

data-clipboard-target="#foo" bu alan ile input'a verilen id aynı olmalıdır.  id="foo"

butona tıklandıktan sonra input içerisindeki value değeri kopyalanmış olacaktır.