因?yàn)榫W(wǎng)站文章需要提供幾個(gè)按鈕，單擊后實(shí)現(xiàn)復(fù)制文章內(nèi)容到剪貼板。

在網(wǎng)上搜索了很多內(nèi)容，發(fā)現(xiàn)都比較亂這里自己整理下，分享給大家

效果圖如下：

之前使用的是window.clipboardData.setData，只能支持IE和火狐。360瀏覽器、搜狗等瀏覽器，都淚崩。所以，研究了ZeroClipboard，盡量使用js代碼寫。

使用前先引用三個(gè)東西（沒有提供上傳附件，這里就不提供下載地址了，很常見，大家自己找度娘吧）：

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

下面是最簡單的實(shí)現(xiàn)了，做一下解釋。

原理

把一個(gè)不可見的 Adobe Flash movie元素放到一個(gè)DOM元素上。用戶點(diǎn)擊那DOM元素時(shí)，其實(shí)點(diǎn)擊的是那不可見的Adobe Flash movie元素，F(xiàn)lash代碼來做將內(nèi)容復(fù)制到剪切板的操作。

注意：如果用js模擬一個(gè)在那flash上的點(diǎn)擊事件，并不能進(jìn)行復(fù)制內(nèi)容到剪貼板。原因是瀏覽器和flash的安全限制。

a標(biāo)簽就是一個(gè)按鈕，你可以替換成圖片等，但是id要和下面的clip.glue("copy_text");一致。

clip.setText(AddContent+ document.getElementById("id_div").innerText + AddContent);這一句的di_div就是要復(fù)制的Div的ID。這個(gè)ID可以是其他的標(biāo)簽的ID。想復(fù)制什么就寫什么的ID。

其他的就原樣復(fù)制。你需要改的，就是最上面兩行，第一行就是需要復(fù)制的標(biāo)簽，一般你的網(wǎng)頁里已經(jīng)有了。只要給他設(shè)置個(gè)ID即可。那么第一行可以刪掉。第二行就可以自由發(fā)揮，反正用超鏈接也好，圖片也好，只要ID和下面的一樣即可。

對(duì)于事先準(zhǔn)備的三個(gè)文件，請上傳到代碼中所示的路徑中。這個(gè)據(jù)說是在服務(wù)器運(yùn)行才行，我直接上傳服務(wù)器測試的

這里已經(jīng)是最簡化的代碼了。網(wǎng)上的那些亂七八糟的，實(shí)在不忍直視，所以，做出來就及時(shí)和大家分享一下。如果本文章有問題要問，可以在博客留言。

 下面是實(shí)現(xiàn)的代碼：

<div id="id_div">文本內(nèi)容</div><br><a href='#' id="copy_text" title="以純文本形式復(fù)制">復(fù)制文章純文本內(nèi)容</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本原創(chuàng)文章來源：C++技術(shù)網(wǎng)，閱讀更多原創(chuàng)精品文章，歡迎訪問C++技術(shù)網(wǎng)。\r\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("文章純文本內(nèi)容已經(jīng)復(fù)制到剪切板！");
  });
});
</script>

最新評(píng)論