img

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/[email protected]/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.

İlk Yorumu Yapan Sen Ol!

Web Tasarımlar

  • Lisans Yönetim Scripti 2

    7.5K
    300.00₺
  • Canlı Radyo Dark Scripti

    5.1K
    500.00₺
  • Canlı Radyo Light Scripti

    4.3K
    500.00₺
  • Rüzgar Radyo Scripti

    6.3K
    300.00₺
  • Radyo Minimal

    2.6K
    300.00₺
  • Ekitap Scripti

    4.4K
    1200.00₺
  • Aşk Sevgililer Günü Evlilik

    5.8K
    200.00₺
  • Sohbet Scripti

    5.8K
  • Dialog Whatsapp Benzeri Sohbet

    3.7K
  • Firebase Chat

    2.6K
    200.00₺
  • Kurumsal Veya Özel Site Hizmet

    1.5K
  • Web Ajans Scripti

    7.9K
    1500.00₺
  • Tekrar Kurulum Hizmeti

    1.6K
    25.00₺
  • Gümrük Ürün Yönetimi

    2K
    800.00₺
  • Ajans Scripti Kolay Kullanım

    1.8K
    500.00₺
  • Ajans Scripti V2

    2K
    500.00₺
  • Ajans Scripti V3

    1.7K
    500.00₺
  • Avukat Ve Hukuk Bürosu Scripti

    1.4K
    500.00₺
  • Avukat Ve Hukuk Bürosu Web Tasarım V2

    1.5K
    700.00₺
  • Mobil Uyumlu Çilingir Scripti

    1.4K
    500.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarım

    1.6K
    700.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı

    1.5K
    500.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2

    1.5K
    700.00₺
  • İlaçlama Şirketi Web Tasarımı

    1.2K
    500.00₺
  • İlan Web Tasarımı

    1.6K
    1000.00₺
  • İlan Web Tasarımı V2

    1.4K
    1500.00₺
  • İnşaat Firması Web Tasarımı

    1.3K
    500.00₺
  • İnşaat Firması Tasarımı V2

    1.4K
    700.00₺
  • Kitapçı Kırtasiye Web Tasarımı

    1.8K
    500.00₺
  • Kombi Klima Servisi Web Tasarımı

    1.6K
    500.00₺
  • Korku Evi Eğlence Mekanı Web Tasarımı

    1.5K
    500.00₺
  • Kurumsal Firma Web Tasarımı V2

    2.1K
    500.00₺
  • Kurumsal Firma Web Tasarımı V3

    2.1K
    500.00₺
  • Ajans Web Tasarımı V4

    1.8K
    1500.00₺
  • Kurumsal Firma Web Tasarımı V4

    2K
    500.00₺
  • Kurumsal Firma Web Tasarımı V5

    2.4K
    500.00₺
  • Kurumsal Firma Web Tasarımı V6

    2.2K
    700.00₺
  • Kurumsal Firma Web Tasarımı V7

    2.2K
    700.00₺
  • Kurumsal Firma Web Tasarımı V8

    2.4K
    700.00₺
  • Mobilya Dekorasyon Web Tasarımı

    1.5K
    500.00₺
  • Nakliyat Taşımacılık Web Tasarımı

    1.4K
    500.00₺
  • Nakliyat Taşımacılık Web Tasarımı V2

    1.4K
    500.00₺
  • Nakliyat Taşımacılık Web Tasarımı V3

    1.4K
    500.00₺
  • Ana Okulu Ve Kreş Web Tasarımı

    1.6K
    500.00₺
  • Otel Pansiyon Web Tasarımı

    1.5K
    700.00₺
  • Özel Oto Servis Web Tasarımı

    1.4K
    500.00₺
  • Rent A Car Araç Kiralama Web Tasarımı

    2.8K
    500.00₺
  • Rent A Car Araç Kiralama Web Tasarımı V2

    1.9K
    700.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı

    1.7K
    700.00₺
  • Restaurant Cafe Bar Lokanta Web Tasarımı V2

    1.6K
    700.00₺
  • Teknik Servis Web Tasarımı

    1.6K
    500.00₺
  • Sigorta Acenta Web Tasarımı

    1.3K
    500.00₺
  • Spor Salonu Body Fitness Web Tasarımı

    1.3K
    500.00₺
  • Spor Salonu Body Fitness Web Tasarımı V2

    1.4K
    700.00₺
  • Sürücü Kursu Web Tasarımı

    1.7K
    500.00₺
  • Tek Ürün Satış Web Tasarımı

    1.8K
    500.00₺
  • Tek Ürün Satış Web Tasarımı V2

    1.5K
    700.00₺
  • Tek Ürün Yaprak Web Tasarımı

    1.5K
    1100.00₺
  • Tek Ürün Yaprak Web Tasarımı V2

    1.6K
    1100.00₺
  • Tek Ürün Satış Web Tasarımı V3

    1.7K
    700.00₺
  • Temizlik Şirketi Web Tasarımı

    1.7K
    500.00₺
  • Temizlik Şirketi Web Tasarımı V2

    1.8K
    700.00₺
  • Ajans Web Tasarımı V5

    2K
    900.00₺
  • Ajans Web Tasarımı V6

    3K
    900.00₺
  • Werock Radyo Web Tasarımı

    2.3K
    400.00₺
  • Werock Android Radyo Uygulaması

    1.2K
    1200.00₺
  • Avukat Ve Hukuk Bürosu Tasarımı V3

    312
    500.00₺
  • Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2

    246
    500.00₺
  • Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3

    347
    500.00₺
  • İnşaat Firması Web Tasarımı V3

    303
    500.00₺
  • Kurumsal Firma Web Tasarımı V9

    402
    500.00₺
  • Mimarlık Web Tasarımı

    336
    500.00₺
  • Nakliyat Taşımacılık Web Tasarımı V4

    373
    500.00₺
  • Ana Okulu Ve Kreş Web Tasarımı V2

    351
    500.00₺
  • Psikolog Web Tasarımı

    413
    500.00₺
  • Spor Salonu Body Fitness Web Tasarımı V3

    565
    600.00₺
  • Sürücü Kursu Web Tasarımı V2

    519
    500.00₺
  • Teknik Servis Web Tasarımı V3

    544
    500.00₺