Pelaksanaan mudah js yang serasi dengan pelayar utama untuk menyalin kandungan ke clipboard_jquery

Oleh kerana artikel tapak web perlu menyediakan beberapa butang, klik untuk menyalin kandungan artikel ke papan keratan.

Saya mencari banyak kandungan di Internet dan mendapati ia agak tidak kemas Di sini saya akan menyelesaikannya dan berkongsi dengan semua orang

Rendering adalah seperti berikut:

Saya menggunakan window.clipboardData.setData sebelum ini, yang hanya menyokong IE dan Firefox. 360 Browser, Sogou dan pelayar lain semuanya menangis. Oleh itu, saya mempelajari ZeroClipboard dan cuba menggunakan kod js untuk menulisnya.

Petikan tiga perkara sebelum digunakan (tiada lampiran muat naik disediakan, jadi alamat muat turun tidak disediakan di sini. Ia adalah perkara biasa. Anda boleh mencari gadis sendiri):

jquery-1.4.1.min.js
ZeroClipboard.js
ZeroClipboard.swf

Berikut ialah pelaksanaan yang paling mudah, sila jelaskan.

Prinsip

Letakkan elemen filem Adobe Flash yang tidak kelihatan pada elemen DOM. Apabila pengguna mengklik pada elemen DOM, dia sebenarnya mengklik pada elemen filem Adobe Flash yang tidak kelihatan dan kod Flash menyalin kandungan ke papan keratan.

Nota: Jika anda menggunakan js untuk mensimulasikan acara klik pada denyar, anda tidak boleh menyalin kandungan ke papan keratan. Sebabnya ialah had keselamatan pelayar dan kilat.

Teg ialah butang Anda boleh menggantikannya dengan imej, dsb., tetapi ID mestilah konsisten dengan clip.glue("copy_text");

clip.setText(AddContent document.getElementById("id_div").innerText AddContent); di_div dalam ayat ini ialah ID Div yang akan disalin. ID ini boleh menjadi ID teg lain. Hanya tulis ID apa sahaja yang anda ingin salin.

Salin selebihnya sebagaimana adanya. Apa yang anda perlu ubah ialah dua baris teratas. Sediakan ID untuk dia. Kemudian baris pertama boleh dipadamkan. Anda boleh menggunakan baris kedua mengikut kehendak anda Anda boleh menggunakan hyperlink atau gambar, asalkan ID adalah sama seperti di bawah.

Untuk tiga fail yang disediakan terlebih dahulu, sila muat naiknya ke laluan yang ditunjukkan dalam kod. Ini dikatakan hanya berfungsi pada pelayan Saya memuat naik terus ke pelayan untuk ujian

Ini adalah kod yang paling mudah. Kekacauan di Internet benar-benar tidak tertanggung untuk dilihat, jadi saya akan berkongsi dengan semua orang sebaik sahaja saya membuatnya. Jika anda mempunyai soalan tentang artikel ini, anda boleh meninggalkan mesej di blog.

Berikut ialah kod yang dilaksanakan:

<div id="id_div">文本内容</div><br><a href='#' id="copy_text" title="以纯文本形式复制">复制文章纯文本内容</a><br>
<script type="text/javascript" src="/js/global/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="/js/global/ZeroClipboard.js"></script>
<script type="text/javascript">
var clip = null;
ZeroClipboard.setMoviePath("/js/global/ZeroClipboard.swf");
$(document).ready(function(){
    var AddContent = "\r\n本原创文章来源：C++技术网，阅读更多原创精品文章，欢迎访问C++技术网。
\n";
  clip = new ZeroClipboard.Client();
  clip.setHandCursor(true);
  clip.setText(AddContent+ document.getElementById("id_div").innerText + AddContent);
  clip.glue("copy_text");
  clip.addEventListener("complete", function(){
    alert("文章纯文本内容已经复制到剪切板！");
  });
});
</script>