js實現複製到剪貼簿功能，相容所有瀏覽器
前段時間做專案的時候，有點選按鈕複製文字的需求，想使用操作windows剪下板實現，在網上查了些資料，發現目前好像只有IE支援直接訪問剪下板，實現需求的時候也只做了IE中的點選複製功能，其餘瀏覽器：
if(window.clipboardData){
window.clipboardData.setData("text" , textvalue);
}else{
//提示非IE瀏覽器不支援該操作程式碼
}zeroclipboard
實現原理
Zero Clipboard 利用 Flash 進行復制，之前有Clipboard Copy 解決方案，其利用的是一個隱藏的 Flash。但最新的 Flash Player 10 只允許在 Flash 上進行操作才能啟動剪貼簿。所以 Zero Clipboard 對此進行了改進，用了一個透明的 Flash ，讓其漂浮在按鈕或是其他元素之上，這樣其實點選的不是按鈕而是 Flash ，也就可以使用 Flash 的複製功能了。
實現步驟
首先下載 Zero Clipboard （點選下載），並解壓縮。將檔案：ZeroClipboard.js和 ZeroClipboard.swf ，放到專案中，下面的測試程式碼將兩個檔案放到了目錄webapp/zeroclipboard/
測試程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Pragma"content="no-cache"> <metahttp-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires"content="0"> <title>Copy2Clipboard</title> </head> <body> <button id="copy_button" data-clipboard-target="copy_textarea"><b>複製到剪貼簿</b></button><br/><br/> <textarea id="copy_textarea" rows="20" cols="100">待複製內容</textarea> </body> </html> <script type="text/javascript"src="zeroclipboard/ZeroClipboard.js"></script> <scripttype="text/javascript"> //定義一個新的複製物件 varclip = new ZeroClipboard( document.getElementById("copy_button"), { moviePath:"zeroclipboard/ZeroClipboard.swf"//設定ZeroClipboard.swf位置 }); //複製內容到剪貼簿成功後的操作 clip.on('complete', function(client, args) { alert("複製成功，複製內容為："+args.text); }); </script>
程式碼解析
上面的html在瀏覽器中表現
定義的複製按鈕button：
zeroclipboard隱藏的flash
通過上面兩個圖片的對比可以看到，zeroclipboard將自己的flash隱藏在了按鈕上面。使用連線或是其他元素也可以
<a id="link_copy" href="#" data-clipboard-target="copy_textarea">copy</a>
此時，在專案中就可以進行判斷，如果是支援window.clipboardData則使用window.clipboardData,否則載入zeroclipboard相關js程式碼和資原始檔，使用zeroclipboard完成複製文字到剪下板的功能。在這裡，IE中不使用zeroclipboard的原因有兩點，第一，IE中可以隨時使用window.clipboardData,但是IE的低版本不支援zeroclipboard；第二載入第三方js會浪費資源。即便是未來的IE不再支援直接訪問剪下板，瀏覽器的怪癖檢測仍然是可行的，但是換成瀏覽器種類檢測就不一定了，比如IE10及以下檢測window.navigator.
"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3)"
判斷其中是否包含MISE，就可以知道是不是IE，但是IE11返回的userAgent是：
"Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; InfoPath.3; rv:11.0) like Gecko"
那麼此時對瀏覽器種類的檢測將失敗，以至於在IE11環境下使用了zeroclipboard。所以在非常有必要的情況下再進行瀏覽器種類檢測，比如告訴使用者當前使用的瀏覽器及其版本，否則建議使用瀏覽器怪癖檢測，如if(window.clipboardData){//……}。
題外話
文章開始說到強迫症犯了，不想使用zeroclipboard實現複製文字到剪下板，是因為當時感覺應該有別的解決方法，比如：模擬鍵盤ctrl+c，或是使用js觸發文字框的剪下板事件： function copy(){
var textarea=document.getElementById("myTextarea");
var textvalue=textarea.value;
if(window.clipboardData){
//IE
window.clipboardData.setData("text" , textvalue);
}else{
//Chrome
console.log(document.implementation.hasFeature("keyboardEvents","3.0"));
var event = document.createEvent("KeyboardEvents");
event.initKeyboardEvent("keydown",true,true,window,"c",0,"Ctrl",0);
textarea.focus();
textarea.select();
textarea.dispatchEvent(event);
}//FF、 OPera未測試
}正當滿心欣喜時，測試失敗了，雖然沒有進行Firefox和Opera瀏覽器中的相關測試，但是僅Chrome中無法實現就已經宣告該實現方式失敗了。 理論上此時應該可以訪問剪下板，但是實際上非IE瀏覽器出於各種安全方面的考慮陸續的不再支援直接訪問剪下板，在剪下板事件中訪問也是失敗的（本地測試）。在Chrome中即便是在剪下板事件物件中使用clipboardData.getData("text")或是setData("text/plain","新的剪下板內容")也是失敗的，測試到這裡，自己的實現思路還是放棄吧，再爭扎已經沒有意義了。