JavaScript實現複製功能

這兩天在作Web前端時，遇到需求經過 js 實現文本複製的功能。

先不考慮瀏覽器的兼容性，看看各瀏覽器對複製功能的支持狀況：

一、IE瀏覽器 ，解決方法有三種，代碼以下：

function copy(txtid){
	var txtObj = document.getElementById(txtid);
	if(window.clipboardData){ // 僅IE支持此對象，firefox、chrome不支持
		//一、經過clipboardData對象實現複製
		//window.clipboardData.clearData();
		//window.clipboardData.setData("Text",txtObj.value);
		
		//二、經過document對象實現複製:先選擇中文本，再執行復制命令
		//txtObj.select();
		//document.execCommand("Copy");	// 僅IE支持，Firefox報語法錯誤，chrome執行結果返回false(不支持)
		
		//三、經過TextRange對象實現現複製：能夠不用先選中內容
		txtObj.createTextRange().execCommand("Copy");
	}
}

二、Firefox，經過接口的方法實現，火狐是出於安全緣由，在17以後版本關閉此接口，17及以前版本可用。 代碼以下 :

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard);

三、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容器裏運行。

下載地址：http://download.csdn.net/detail/bbirdsky/5776583