有些時候厢岂，我們希望讓用戶在網(wǎng)頁上完成某個操作就能自動將指定的內(nèi)容復制到用戶計算機的剪貼板中。但是出于安全原因下愈，大多數(shù)現(xiàn)代瀏覽器都未提供通用的剪貼板復制接口(或即便有毡琉，也默認被禁用)。只有IE瀏覽器可以通過如下方式來進行復制舍杜。
window.clipboardData.setData("Text", "這里是需要復制的文本內(nèi)容")
想要實現(xiàn)跨瀏覽器的復制功能新娜，我們就可以使用 ZeroClipboard。
ZeroClipboard 及其原理介紹
ZeroClipboard 是國外大神開發(fā)的一個用于剪貼板復制的 JS 插件蝴簇，它是基于 Flash 來實現(xiàn)跨瀏覽器的復制功能的杯活。當我們使用 ZeroClipboard 的時候匆帚，它會悄悄隱藏一個小小的 Flash 影片(swf)熬词，不會對我們的用戶界面造成影響。我們只需要借助它實現(xiàn)復制功能就行了吸重。ZeroClipboard 中的 "Zero" 指的就是"不可見互拾，零干擾"。
不過從 Flash 10開始嚎幸，由于瀏覽器和Flash的安全限制颜矿，要求用戶必須在Flash區(qū)域上進行真實操作才能操作剪貼板。于是嫉晶，ZeroClipboard 的作者想到一個辦法：它將 Flash 做成透明的骑疆，以便于我們放在諸如鏈接、按鈕等需要放置的任何地方替废。這樣箍铭，用戶界面看起來沒有變化，當點擊鏈接或按鈕時，實際上點擊是卻是 Flash，從而實現(xiàn)復制操作沪袭。
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文件中被瀏覽器直接打開巡语，將無法正常工作。
<!-- 這里是HTML代碼部分 -->
<textarea id="content" rows="10" cols="60">這里是需要復制的內(nèi)容</textarea>
<input id="copy" type="button" data-clipboard-target="content" value="復制">
<!-- 這里是JS代碼部分 -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.1.6/ZeroClipboard.min.js" ></script>
<script type="text/javascript">
// 將【復制】按鈕充當復制數(shù)據(jù)的元素載體
var clip = new ZeroClipboard( document.getElementById("copy") );</script>
以上就是引入并使用 ZeroClipboard 的最簡代碼淮菠。我們?yōu)椤緩椭啤堪粹o指定了data-clipboard-target
屬性男公，其值為將被復制數(shù)據(jù)的元素id。此時合陵，我們點擊【復制】按鈕就可以復制id為content的textarea中的文本數(shù)據(jù)枢赔。你可以點擊這里 運行代碼
ZeroClipboard 重要事項
關于文件引入和本地化使用
上面我們引入的JS文件是 ZeroClipboard 官方提供的 CDN，你可以直接使用拥知。如果你想將其下載到本地服務器上使用踏拜，你可以進入官方網(wǎng)站下載最新版本。然后將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' } );
多個復制載體
如果你希望在頁面中有多個按鈕、鏈接等元素充當復制數(shù)據(jù)的載體猜欺，你可以以數(shù)組(或類數(shù)組)形式傳入多個元素位隶。以下幾種方式都是可以的：
// 方式一 (生成多個ZeroClipboard對象，適合不同載體復制不同來源的數(shù)據(jù))
var clip = new ZeroClipboard( document.getElementById("copy") );
var clip2 = new ZeroClipboard( document.getElementById("copy2") );
// 方式二 (生成一個ZeroClipboard對象开皿，適合不同載體復制相同來源的數(shù)據(jù))
var doms = [ document.getElementById("copy"),
document.getElementById("copy2") ];
// var doms = document.getElementsByName("copy");
// 通過ByName或ByTagName獲取多個元素也是可以的
// var doms = $(".copy");
// 通過jQuery對象也是可以的
// 只要是通過length屬性訪問元素個數(shù)涧黄、通過數(shù)字索引來訪問DOM元素的對象都是可以的var clip = new ZeroClipboard( doms );
更改復制載體
如果之前你使用【按鈕1】來充當復制載體，現(xiàn)在你想添加【按鈕2】來充當復制載體赋荆。你可以調(diào)用 ZeroClipboard 實例的clip()
方法：
var clip = new ZeroClipboard( document.getElementById("copy") );
// 添加id為copy2的元素作為復制載體笋妥，原來id為copy的元素依然可用clip.clip( document.getElementById("copy2")
/* 也可以數(shù)組形式傳入多個 */ );
如果你想要卸載指定的復制載體，你可以使用unclip()
方法糠睡。
// 取消id為copy2的元素上注冊的復制功能
clip.unclip( document.getElementById("copy2") /* 也可以數(shù)組形式傳入多個 */ );
// 不指定任何參數(shù)挽鞠，則取消該對象之前在所有元素上注冊的復制功能clip.clip();
設置用于復制的文本數(shù)據(jù)
如果指定了data-clipboard-target
屬性，ZeroClipboard 將依次嘗試通過該元素的value狈孔、textContent信认、innerText屬性來獲取文本數(shù)據(jù)(依次判斷是否有上述屬性，并以最靠前的屬性為準)均抽。
當然嫁赏，ZeroClipboard 也并非只能通過其他元素才能獲得用于復制的文本數(shù)據(jù)，我們還可以給復制載體自身的data-clipboard-text
屬性來設置用于復制的文本數(shù)據(jù)油挥，之后你還可以通過設置該屬性值(setAttribute())來更改需要復制的文本內(nèi)容潦蝇。
<input id="copy" type="button" data-clipboard-text="這里是用于復制的內(nèi)容款熬，value="復制">
此外，我們甚至無需通過元素節(jié)點的屬性來設置用于復制的文本數(shù)據(jù)攘乒，我們可以直接使用 ZeroClipboard 對象的setText()
方法來設置文本數(shù)據(jù)贤牛。注意，該方法設置的數(shù)據(jù)是一次性的则酝，使用該方法設置復制數(shù)據(jù)后殉簸，只在下一次復制操作時生效。之后即使你點擊復制按鈕也不再執(zhí)行復制沽讹，除非你再次調(diào)用setText()
方法(你可以綁定復制("copy")事件來調(diào)用該方法般卑，從而實現(xiàn)每次復制操作都設置數(shù)據(jù)，下面我們會講到)爽雄。
clip.setText("設置用于復制的文本內(nèi)容");
數(shù)據(jù)來源的優(yōu)先級問題：如果我們同時為復制載體設置了data-clipboard-text
蝠检、 data-clipboard-target
屬性，并調(diào)用了setText()
方法挚瘟，那么 ZeroClipboard 復制數(shù)據(jù)的優(yōu)先級是：setText() > data-clipboard-target > data-clipboard-text叹谁。
如果前者沒有文本數(shù)據(jù)(沒有調(diào)用、 沒有屬性或者數(shù)據(jù)為空字符串)刽沾，則以下一個優(yōu)先級為準本慕，如果都沒有文本數(shù)據(jù)，則不復制侧漓。
舉例來說，如果同時設置上述三者监氢。第一次復制：先取setText()
設置的數(shù)據(jù)布蔗，如果為空字符串，則取data-clipboard-target
對應元素的數(shù)據(jù)浪腐；如果它也為空字符串纵揍，則取data-clipboard-text
屬性的文本數(shù)據(jù)；如果它也為空字符串议街，則不復制泽谨。注意，由于setText()
設置的數(shù)據(jù)是一次性的特漩，下一次復制將以data-clipboard-target
屬性為準(除非再次調(diào)用setText()
方法)吧雹。
數(shù)據(jù)類型
眾所周知，剪貼板中的數(shù)據(jù)是有類型的涂身，每一種類型都可以有自己的數(shù)據(jù)雄卷。我們復制的數(shù)據(jù)可以有多種類型，當我們粘貼的時候蛤售，會粘貼當前程序可接受類型的數(shù)據(jù)丁鹉。
ZeroClipboard也支持設置多種類型的剪貼板數(shù)據(jù)妒潭。它為我們提供了setText()、setHtml揣钦、setRichText()方法分別用于設置純文本數(shù)據(jù)雳灾、HTML內(nèi)容、富文本內(nèi)容冯凹。
// 可同時設置佑女，粘貼時根據(jù)接收程序的不同，而粘貼出不同的內(nèi)容clip.setText("CodePlayer");clip.setHtml("<strong>CodePlayer</strong>");clip.setRichText("{\rtf1\ansi\n{\b CodePlayer}}");
此外谈竿，ZeroClipboard還提供了一個通用的設置方法setData()
团驱，用于設置各種類型的數(shù)據(jù)。
// 可同時設置空凸，粘貼時根據(jù)接收程序的不同嚎花，而粘貼出不同的內(nèi)容clip.setData("text/plain", "CodePlayer");clip.seData("text/html", "<strong>CodePlayer</strong>");clip.setData("application/rtf", "{\rtf1\ansi\n{\b CodePlayer}}");
事件處理
ZeroClipboard 還為我們提供了事件支持，以便于處理ZeroClipboard觸發(fā)的各種事件呀洲。ZeroClipboard支持的事件有"ready"紊选、 "beforecopy"、 "copy"道逗、 "aftercopy"兵罢、 "destroy"、 "error"滓窍。
我們可以通過on()
方法來注冊事件處理函數(shù)卖词。
// 當Flash SWF文件加載完成并準備就緒時觸發(fā)ready事件clip.on("ready", function(){ alert("加載完成!"); });// 當觸發(fā)copy事件時，設置用于復制的文本數(shù)據(jù)clip.on("copy", function(e){ e.clipboardData.setData("text/plain", "這里是用于復制的純文本數(shù)據(jù)")});
此外吏夯，off()
方法用來取消注冊的事件處理函數(shù)此蜈，emit()
方法用來手動觸發(fā)事件。其用法與jQuery的on()噪生、 off()裆赵、 trigger()方法非常相似。
此外跺嗽，如果你有多個ZeroClipboard對象战授，你想為它們都注冊事件處理函數(shù)。你可以使用全局對象ZeroClipboard的靜態(tài)方法ZeroClipboard.on()
桨嫁、 ZeroClipboard.off()
植兰、 ZeroClipboard.emit()
來全局性地設置事件。全局事件將對每個對象都生效瞧甩。
關于事件處理的詳細用法钉跷，請參考ZeroClipboard事件及其屬性細節(jié)。
