DIV CSS 佈局教程網

這兩天在做Web前端時，遇到需求通過js實現文本復制的功能。
先不考慮浏覽器的兼容性，看看各浏覽器對復制功能的支持情況：

1、IE浏覽器，解決方法有三種，代碼如下：

復制代碼 代碼如下:
function copy(txtid){
var txtObj = document.getElementById(txtid);
if(window.clipboardData){ // 僅IE支持此對象，firefox、chrome不支持
//1、通過clipboardData對象實現復制
//window.clipboardData.clearData();
//window.clipboardData.setData("Text",txtObj.value);

//2、通過document對象實現復制:先選擇中文本，再執行復制命令
//txtObj.select();
//document.execCommand("Copy"); // 僅IE支持，Firefox報語法錯誤，chrome執行結果返回false(不支持)

//3、通過TextRange對象實現現復制：可以不用先選中內容
txtObj.createTextRange().execCommand("Copy");
}
}

2、Firefox，通過接口的方法實現，火狐是出於安全原因，在17之後版本關閉此接口，17及之前版本可用。代碼如下:

復制代碼 代碼如下:
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);

3、Chrome出於安全，未向用戶提供對剪貼板的操作。由此可見，各浏覽器對復制功能的支持並不統一。
Zero Clipboard庫
jhuckaby寫的Zero Clipboard的js類庫，利用Flash完成復制內容到剪貼板。只要浏覽器裝有Flash插件就可以復制內容，通過ActionScript屏蔽了JavaScript的不足，解決浏覽器間復制兼容性問題。
Zero Clipboard的實現原理：Zero Clipboard首先生成Flash對象標簽，讓透明的Flash漂浮在復制按鈕之上，其實點擊的不是按鈕而是Flash，這樣將需要的內容傳入Flash，再通過Flash的復制到系統剪貼板。
Zero Clipboard的使用方法
注 意：由於是基於Flash實現，Flash出於安全，需要在Web容器（例如Apache、Tomcat）中才能運行，直接打開Flash將不會被加載， 按鈕類似假死現象，網上說右鍵Flash設置將ZeroClipboard.swf添加到受信任位置，感覺應該是行的，我試了，仍然不行，也可能是我本地 浏覽器的問題。
1>下載Zero Clipboard的壓縮包，解壓後把文件夾中兩個文件：ZeroClipboard.js和ZeroClipboard.swf放入到你的項目中;
2>引入Zero Clipboard.js文件，如下代碼：<script type="text/javascript" src="ZeroClipboard.js"></script>;
注意：ZeroClipboard.js與ZeroClipboard.swf需要放在同一路徑下，如果不在同一路徑，可使用ZeroClipboard.setMoviePath()來設置。
3>簡單復制代碼如下：

復制代碼 代碼如下:
var clip = new ZeroClipboard.Client(); // 新建一個clip對象
clip.setHandCursor( true ); // 設置鼠標為手型
clip.setText("hello,world"); // 設置要復制的文本，可以為文本框的值
clip.glue("copy-botton"); // 為clip注冊一個按鈕，參數為按鈕元素的id，點擊按鈕就可以實現復制

4>Zero Clipboard常用方法，建議直接查看源碼：
reposition()：防止當頁面大小發生變化時，Flash按鈕可能會錯位問題
hide() ：隱藏Flash按鈕
show() ：顯示Flash按鈕
setCSSEffects()：解決Flash遮擋按鈕樣式失效問題(將:hover修改為.hover)。
5>Zero Clipboard 常用事件，事件處理函數為addEventListener()：
load ：Flash按鈕加載完事件
mouseOver：鼠標移上事件
mouseOut： 鼠標移出事件
mouseDown：鼠標按下事件
mouseUp：鼠標松開事件
complete：復制成功事件

jquery.zclip庫
由於ZeroClipboard是基於原生JavaScript實現，jquery.zclip使用jQuery對Zero Clipboard進行封裝，如果項目中已經使用jQuery，建議使用它，jquery.zclip體積較小。
jquery.zclip下載地址：http://www.steamdev.com/zclip/
Zero Clipboard下載地址：https://github.com/zeroclipboard/ZeroClipboard/releases
示例下載：
為了方便測試，我將jquery.zclip和Zero Clipboard寫好的例子上傳到csdn，示例必須在web容器裡運行。