Blog Yazarı Olmak İster misin?

Kaleminize güveniyorsanız, bloğumuzda özgürce web, hosting, teknoloji ve programlama dilleri üzerine makale yazabilirsiniz. Bizde sizi sürekli hediye kuponlar ile ödüllendiririz. Blog Yaz!


Jquery İle Panoya Kopyalama İşlemi

Tahmini okuma 2 dakika 8 saniye Görüntülenme: 276

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.


4 ay önce Özkan Işık tarafından yazıldı. Son güncelleme 02.05.2022 20:47

Yorum Yap


İlk yorumu yapan sen ol!
Blogtan Son Yazılar

Yeni Ürünlerden İlk Siz Haberdar Olun!

Şimdi abone olarak yeni ürün ve indirim kampanyalarından anında faydalanın!

veya üye olmak isteyebilirsiniz

Üye Ol