JavaScript實作複製功能

先不考慮瀏覽器的相容性，看看各瀏覽器對複製功能的支援：

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體積較小。