Rumah >hujung hadapan web >tutorial js >Pemalam jQuery Zclip menyedari keserasian sempurna dengan setiap pelayar dan klik untuk menyalin kandungan ke clipboard_jquery

Pemalam jQuery Zclip menyedari keserasian sempurna dengan setiap pelayar dan klik untuk menyalin kandungan ke clipboard_jquery

WBOY
WBOYasal
2016-05-16 16:01:361384semak imbas

Dalam pembangunan WEB, pengguna diminta menyalin sekeping kod, alamat URL dan maklumat lain pada halaman Untuk mengelakkan kemungkinan ralat apabila pengguna menyeret tetikus dan kemudian klik kanan untuk menyalin, kami boleh terus meletakkan butang salin pada halaman. Hanya klik pada butang salin ini, kandungan akan disalin, dan kemudian pengguna boleh menampal di tempat yang mereka mahu tampal.

HTML

Pertama, anda perlu memuatkan pustaka jquery dan pemalam zclip ke dalam halaman kedua-dua fail ini telah dibungkus.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.zclip.min.js"></script> 

Kemudian kami menambah kod berikut pada bahagian badan halaman:

<textarea id="mytext">请输入内容</textarea><br/> 
<a href="#" id="copy_input" class="copy">复制内容</a>

Kawasan teks kotak input diletakkan pada halaman Sudah tentu ia juga boleh menjadi elemen html lain, dan kemudian terdapat butang salin, yang juga boleh dalam bentuk teks pautan.

Javascript

Apabila "Salin Kandungan" diklik, pemalam zclip dipanggil dan salinan berjaya Sila lihat kod:

$(function(){ 
  $('#copy_input').zclip({ 
    path: 'js/ZeroClipboard.swf', 
    copy: function(){//复制内容 
      return $('#mytext').val(); 
    }, 
    afterCopy: function(){//复制成功 
      $("<span id='msg'/>").insertAfter($('#copy_input')).text('复制成功'); 
    } 
  }); 
}); 

Perlu diambil perhatian bahawa jika kandungan yang disalin datang daripada input kotak input, kawasan teks, dsb., gunakan objek salin:

copy: function(){ 
  return $('#mytext').val(); 
} 

Jika kandungan yang disalin datang daripada elemen halaman div, p, dsb., gunakan objek salin:
copy: $('#mytext').text();
Ini melengkapkan fungsi menyalin kandungan ke papan keratan.
Perihalan parameter
laluan: laluan panggilan swf, diperlukan, seperti js/ZeroClipboard.swf, fail ZeroClipboard.swf sudah wujud dalam pakej muat turun.
salin: Kandungan yang disalin mestilah sebarang rentetan, atau ia boleh menjadi kandungan yang dikembalikan oleh fungsi panggil balik
beforeCopy: fungsi panggil balik sebelum menyalin kandungan, pilihan
afterCopy: fungsi panggil balik selepas menyalin kandungan, pilihan

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn