這兩天在做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容器裡運行。
demo下載地址