先不考慮瀏覽器的相容性,看看各瀏覽器對複製功能的支援:
1、IE瀏覽器,解決方法有三種,程式碼如下:
[javascript]
function copy(txtid) {
var txtObj = document.getElementById(txtid);
if(window.clipboardData Data
// window.clipboardData.clearData();
//window.clipboardData.setData("Text",txtObj.value);
先選擇中文本,再執行複製指令 //txtObj.select(); //document.execCommand("Copy"); // //3 、透過TextRange物件實現現複製:可以不選擇內容 txtObj.createTextRange().execCommand("Copy");id){
var txtObj = document .getElementById(txtid);
if(window.clipboardData){ // 僅IE支援此對象,firefox、chrome不支援
//1、透過clipboardData物件實作複製
//window.clipboardData. ;
//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及之前版本可用。程式碼如下:
[javascript]
var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);
. ['@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,這樣將需要的內容傳入Flash,再漂浮在複製按鈕之上,其實點擊的不是按鈕而是Flash,這樣將需要的內容傳入Flash,然後再漂浮透過Flash的複製到系統剪貼簿。 Zero Clipboard的使用方法 注意:由於是基於Flash實現,Flash出於安全,需要在Web容器(例如Apache、Tomcat)中運行,直接打開Flash才能加載,按鈕類似假死現象,網路上說右鍵Flash設定將ZeroClipboard.swf加入到受信任位置,感覺應該是行的,我試了,仍然不行,也可能是我本地瀏覽器的問題。 1>下載Zero Clipboard的壓縮包,解壓縮後把資料夾中兩個檔案:ZeroClipboard.js和ZeroClipboard.swf放入到你的專案中;. ,如下程式碼:;
注意:ZeroClipboard.js與ZeroClipboard.swf需要放在同一路徑下,如果不在同一路徑,可使用ZeroClipboard.setMoviePath()來設定。
3>簡單複製程式碼如下:
[javascript]
var clip = new ZeroClipboard.Client()
var clip = new ZeroClipboard.Client()
var clip = new ZeroClipboard.Client(); // 設定滑鼠為手型
clip.setText("hello,world"); // 設定要複製的文本,可為文字方塊的值
clip.60,7070770770770307007000p70p.按鈕,參數為按鈕元素的id,點選按鈕就可以實現複製
var clip = new ZeroClipboard.Client(); // 新建一個clip物件
clip.setHandCursor( true ); // 設定為手型 lipp. // 設定要複製的文本,可以為文本框的值
clip.glue("copy-botton"); // 為clip註冊一個按鈕,參數為按鈕元素的id,點擊按鈕就可以實現複製
4>Zero Clipboard常用方法,建議直接檢視來源碼:
reposition():防止當頁面大小改變時,Flash按鈕可能會錯位問題
:顯示Flash按鈕
setCSSEffects():解決Flash遮擋按鈕樣式失效問題(將:hover修改為.hover)。
5>Zero Clipboard 常用事件,事件處理函數為addEventListener():
load :Flash按鈕載入完事件
鼠標 mouseDown:滑鼠按下事件 mouseUp:滑鼠鬆開事件 complete:複製成功事件jquery.zclip使用jQuery對Zero Clipboard進行封裝,如果專案中已經使用jQuery,建議使用它,jquery.zclip體積較小。