相信這個功能大家平時上網(wǎng)經(jīng)常能碰到，去看了幾個常用的網(wǎng)站，都是用的透明flash遮擋“復(fù)制到剪貼板”按鈕，所以當(dāng)你點擊按鈕的時候，點擊的其實是flash，然后把你需要復(fù)制的內(nèi)容傳入到了flash，最后通過flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到了剪貼板。

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

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

效果圖如下：

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

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

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

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

原理

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

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

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

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

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

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

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

下面是實現(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>

您可能感興趣的文章: