有些時候，我們希望讓用戶在網頁上完成某個操作就能自動將指定的內容復制到用戶計算機的剪貼板中。但是出於安全原因，大多數現代瀏覽器都未提供通用的剪貼板復制接口(或即便有，也默認被禁用)。只有IE瀏覽器可以通過如下方式來進行復制。
window.clipboardData.setData("Text", "這里是需要復制的文本內容")
想要實現跨瀏覽器的復制功能，我們就可以使用 ZeroClipboard。
ZeroClipboard 及其原理介紹
ZeroClipboard 是國外大神開發的一個用於剪貼板復制的 JS 插件，它是基於 Flash 來實現跨瀏覽器的復制功能的。當我們使用 ZeroClipboard 的時候，它會悄悄隱藏一個小小的 Flash 影片(swf)，不會對我們的用戶界面造成影響。我們只需要借助它實現復制功能就行了。ZeroClipboard 中的 "Zero" 指的就是"不可見，零干擾"。
不過從 Flash 10開始，由於瀏覽器和Flash的安全限制，要求用戶必須在Flash區域上進行真實操作才能操作剪貼板。於是，ZeroClipboard 的作者想到一個辦法：它將 Flash 做成透明的，以便於我們放在諸如鏈接、按鈕等需要放置的任何地方。這樣，用戶界面看起來沒有變化，當點擊鏈接或按鈕時，實際上點擊是卻是 Flash，從而實現復制操作。
ZeroClipboard 快速入門
使用 ZeroClipboard 的方法非常簡單，我們只需要在頁面中引入它的一個JS文件並稍作配置(最簡單只需一行代碼)即可(實際上還需要引入一個Flash的swf文件，不過 ZeroClipboard 會自動引入它)。
請參考下面的示例代碼：
注意：這里介紹的是目前最新版 ZeroClipboard 2.1.6 的用法，2.x 版本均可參考，但 1.x 的用法與此並不相同！
ZeroClipboard 2.x 原則上不兼容IE 6 ~ IE 8等低版本IE瀏覽器，如果需要兼容IE 6 ~ IE 8，請使用 1.x 或者 2.0.2 版本(詳情可以參考下方評論中的官方鏈接)，推薦使用 2.0.2 版本。
此外，由於 Flash 本地沙箱的安全限制，以下代碼如果是在本地HTML文件中被瀏覽器直接打開，將無法正常工作。在這里提供一個資源不錯的CDN庫（http://www.bootcdn.cn/），在這里可以找到我們想要使用的ZeroClipboard2.0.2版本。以下是bootcdn中ZeroClipboard鏈接：http://cdn.bootcss.com/zeroclipboard/2.0.2/ZeroClipboard.min.js
<!-- 這里是HTML代碼部分，使用ZeroClipboard必須要有一個數據源，這個數據源可以是文本框，可以是div,或其它正確的HTML標簽 -->
<textarea id="content" rows="10" cols="60">這里是需要復制的內容</textarea>
<input id="copy" type="button" data-clipboard-target="content" value="復制">
<!-- 這里是JS代碼部分 -->
<script type="text/javascript" src="http://cdn.bootcss.com/zeroclipboard/2.0.2/ZeroClipboard.min.js" ></script>
<script type="text/javascript">
// 將【復制】按鈕充當復制數據的元素載體
var clip = new ZeroClipboard( document.getElementById("copy") );
</script>
以上就是引入並使用 ZeroClipboard 的最簡代碼。我們為【復制】按鈕指定了data-clipboard-target屬性，其值為將被復制數據的元素id。此時，我們點擊【復制】按鈕就可以復制id為content的textarea中的文本數據。你可以點擊這里 運行代碼
ZeroClipboard 重要事項
關於文件引入和本地化使用
上面我們引入的JS文件是 ZeroClipboard 官方提供的 CDN，你可以直接使用。如果你想將其下載到本地服務器上使用，你可以進入官方網站下載最新版本。然后將dist目錄下的ZeroClipboard.js(或者壓縮版的ZeroClipboard.min.js)和ZeroClipboard.swf這兩個文件上傳到自己的服務器即可。
請確保它們被放在同一目錄下，以便於 ZeroClipboard.js 自動加載 ZeroClipboard.swf 文件。否則你需要在使用前額外配置swf文件的路徑。
// 在 new ZeroClipboard()之前，需要先配置 ZeroClipboard.swf 文件的路徑
ZeroClipboard.config( { swfPath: 'http://YOURSERVER/path/ZeroClipboard.swf' } );
多個復制載體
如果你希望在頁面中有多個按鈕、鏈接等元素充當復制數據的載體，你可以以數組(或類數組)形式傳入多個元素。以下幾種方式都是可以的：
// 方式一 (生成多個ZeroClipboard對象，適合不同載體復制不同來源的數據)
var clip = new ZeroClipboard( document.getElementById("copy") );
var clip2 = new ZeroClipboard( document.getElementById("copy2") );
// 方式二 (生成一個ZeroClipboard對象，適合不同載體復制相同來源的數據)
var doms = [ document.getElementById("copy"), document.getElementById("copy2") ];
// var doms = document.getElementsByName("copy"); // 通過ByName或ByTagName獲取多個元素也是可以的
// var doms = $(".copy"); // 通過jQuery對象也是可以的
// 只要是通過length屬性訪問元素個數、通過數字索引來訪問DOM元素的對象都是可以的
var clip = new ZeroClipboard( doms );
更改復制載體
如果之前你使用【按鈕1】來充當復制載體，現在你想添加【按鈕2】來充當復制載體。你可以調用 ZeroClipboard 實例的clip()方法：
var clip = new ZeroClipboard( document.getElementById("copy") );
// 添加id為copy2的元素作為復制載體，原來id為copy的元素依然可用
clip.clip( document.getElementById("copy2") /* 也可以數組形式傳入多個 */ );
如果你想要卸載指定的復制載體，你可以使用unclip()方法。
// 取消id為copy2的元素上注冊的復制功能
clip.unclip( document.getElementById("copy2") /* 也可以數組形式傳入多個 */ );
// 不指定任何參數，則取消該對象之前在所有元素上注冊的復制功能
clip.clip();
設置用於復制的文本數據
如果指定了data-clipboard-target屬性，ZeroClipboard 將依次嘗試通過該元素的value、textContent、innerText屬性來獲取文本數據(依次判斷是否有上述屬性，並以最靠前的屬性為准)。
當然，ZeroClipboard 也並非只能通過其他元素才能獲得用於復制的文本數據，我們還可以給復制載體自身的data-clipboard-text屬性來設置用於復制的文本數據，之后你還可以通過設置該屬性值(setAttribute())來更改需要復制的文本內容。
<input id="copy" type="button" data-clipboard-text="這里是用於復制的內容，CodePlayer" value="復制">
此外，我們甚至無需通過元素節點的屬性來設置用於復制的文本數據，我們可以直接使用 ZeroClipboard 對象的setText()方法來設置文本數據。注意，該方法設置的數據是一次性的，使用該方法設置復制數據后，只在下一次復制操作時生效。之后即使你點擊復制按鈕也不再執行復制，除非你再次調用setText()方法(你可以綁定復制("copy")事件來調用該方法，從而實現每次復制操作都設置數據，下面我們會講到)。
clip.setText("設置用於復制的文本內容");
數據來源的優先級問題：如果我們同時為復制載體設置了data-clipboard-text、 data-clipboard-target屬性，並調用了setText()方法，那么 ZeroClipboard 復制數據的優先級是：setText() > data-clipboard-target > data-clipboard-text。
如果前者沒有文本數據(沒有調用、 沒有屬性或者數據為空字符串)，則以下一個優先級為准，如果都沒有文本數據，則不復制。
舉例來說，如果同時設置上述三者。第一次復制：先取setText()設置的數據，如果為空字符串，則取data-clipboard-target對應元素的數據；如果它也為空字符串，則取data-clipboard-text屬性的文本數據；如果它也為空字符串，則不復制。注意，由於setText()設置的數據是一次性的，下一次復制將以data-clipboard-target屬性為准(除非再次調用setText()方法)。
數據類型
眾所周知，剪貼板中的數據是有類型的，每一種類型都可以有自己的數據。我們復制的數據可以有多種類型，當我們粘貼的時候，會粘貼當前程序可接受類型的數據。
ZeroClipboard也支持設置多種類型的剪貼板數據。它為我們提供了setText()、setHtml、setRichText()方法分別用於設置純文本數據、HTML內容、富文本內容。
// 可同時設置，粘貼時根據接收程序的不同，而粘貼出不同的內容
clip.setText("CodePlayer");
clip.setHtml("<strong>CodePlayer</strong>");
clip.setRichText("{\\rtf1\\ansi\n{\\b CodePlayer}}");
此外，ZeroClipboard還提供了一個通用的設置方法setData()，用於設置各種類型的數據。
// 可同時設置，粘貼時根據接收程序的不同，而粘貼出不同的內容
clip.setData("text/plain", "CodePlayer");
clip.seData("text/html", "<strong>CodePlayer</strong>");
clip.setData("application/rtf", "{\\rtf1\\ansi\n{\\b CodePlayer}}");
事件處理
ZeroClipboard 還為我們提供了事件支持，以便於處理ZeroClipboard觸發的各種事件。ZeroClipboard支持的事件有"ready"、 "beforecopy"、 "copy"、 "aftercopy"、 "destroy"、 "error"。
我們可以通過on()方法來注冊事件處理函數。
// 當Flash SWF文件加載完成並准備就緒時觸發ready事件
clip.on("ready", function(){ alert("加載完成!"); });
// 當觸發copy事件時，設置用於復制的文本數據
clip.on("copy", function(e){
e.clipboardData.setData("text/plain", "這里是用於復制的純文本數據")
});
此外，off()方法用來取消注冊的事件處理函數，emit()方法用來手動觸發事件。其用法與jQuery的on()、 off()、 trigger()方法非常相似。
此外，如果你有多個ZeroClipboard對象，你想為它們都注冊事件處理函數。你可以使用全局對象ZeroClipboard的靜態方法ZeroClipboard.on()、 ZeroClipboard.off()、ZeroClipboard.emit()來全局性地設置事件。全局事件將對每個對象都生效。
關於事件處理的詳細用法，請參考ZeroClipboard事件及其屬性細節。