簡單實作相容各大瀏覽器的js複製內容到剪切板_jquery

因為網站文章需要提供幾個按鈕，點擊後實作複製文章內容到剪貼簿。

網路上搜尋了許多內容，發現都比較亂這裡自己整理下，分享給大家

效果圖如下：

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

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

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

下面是最簡單的實作了，做一下解釋。

原理

把一個不可見的 Adob​​​​e Flash movie元素放到一個DOM元素上。當使用者點擊那DOM元素時，其實點擊的是那不可見的Adobe Flash movie元素，Flash程式碼來做將內容複製到剪切板的操作。

注意：如果用js模擬一個在那flash上​​的點擊事件，並不能進行複製內容到剪貼簿。原因是瀏覽器和flash的安全限制。

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

clip.setText(AddContent document.getElementById("id_div").innerText AddContent);這句話的di_div就是要複製的Div的ID。這個ID可以是其他的標籤的ID。想複製什麼就寫什麼的ID。

其他的就原樣複製。你需要改的，就是最上面兩行，第一行就是需要複製的標籤，一般你的網頁裡已經有了。只要給他設定個ID即可。那麼第一行可以刪掉。第二行就可以自由發揮，反正用超連結也好，圖片也好，只要ID跟下面的一樣即可。

對於事先準備的三個文件，請上傳到程式碼中所示的路徑中。這個據說是在伺服器運行才行，我直接上傳伺服器測試的

這裡已經是最簡化的程式碼了。網路上的那些亂七八糟的，實在不忍直視，所以，做出來就及時和大家分享一下。如果本文章有問題要問，可以在部落格留言。

 下面是實現的程式碼：

<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>