點擊按鈕復(fù)制文本內(nèi)容 -- jquery Zclip -- Zero Clipboard

今天,經(jīng)理讓我做一個功能,復(fù)制文本框中的代碼.以前在其他網(wǎng)站上經(jīng)常見到過這個功能.只不過沒有細(xì)細(xì)研究,今天也是個機(jī)會.

這里我使用的事jquery的zeroclipboard來實現(xiàn)復(fù)制功能.代碼內(nèi)容很簡單,網(wǎng)上也有很多資料.

Zero Clipboard作為一個獨立的js庫，它利用 Flash 進(jìn)行復(fù)制，需要兩個文件：ZeroClipboard.js 和 ZeroClipboard.swf 。

具體實現(xiàn)如下:

jsp頁面:

 <p>
	                                    	<textarea class="h200"  id="jscode">
<!--Ad Survey 廣告加載基礎(chǔ)代碼-->
<script type="text/javascript" src="http://ipengtai.huanqiu.com/resource/js/base.js">
</script>                                    	
	                                    	</textarea>
	                                    </p>
	                                    <div class="btn_blank floatL MT10">
	                                    	<a href="javascript:void(0)" id="jscodeCopy">復(fù)制代碼</a>
	                                    </div>

js代碼:

$("#jscodeCopy").zclip({
        path:'../../../js/pub/media/adPos/ZeroClipboard.swf', //記得把ZeroClipboard.swf引入到項目中 
        copy:function(){
            return $('#jscode').val();
        },
        afterCopy:function(){// 復(fù)制成功后的操作
        	$("#jscopyResult").show().html("復(fù)制代碼成功");
        	$("#htmlcopyResult").hide();
        }
    });

對,就這簡簡單單的兩行,問題就解決了.

不過我在查找解決這個問題的時候,可沒有這么簡單.首先我們來看看這中間遇到的問題.

1. 第一個問題也是糾結(jié)時間最長的一個問題.這段代碼不能夠在本地環(huán)境下運行,必須要部署到服務(wù)器上.我測試jquery代碼的時候,習(xí)慣現(xiàn)在本地測試,成功后才會轉(zhuǎn)嫁到項目代碼中.這次吃虧了,這個jquery方法必須在服務(wù)器環(huán)境下才能運行得到正確的結(jié)果,因為瀏覽器對flash文件的限制.(由于游覽器對 Flash 的安全措施， 請不要在本地 file:/// 下進(jìn)行調(diào)試， 你會發(fā)現(xiàn)效果始終不會出現(xiàn)， 請通過 http:// 方式運行)

   
   

2. zclip()方法無效:不管怎么樣,程序就是進(jìn)不來這個方法.多次嘗試,發(fā)現(xiàn)當(dāng)copy函數(shù)只返回一句話的時候,afterCopy只返回一句話的時候,該函數(shù)才生效.

   
   

3. 第二個問題,同時也是第三個問題.為什么copy里不能做更多的邏輯判斷,寫更多的代碼呢?多寫一個alert();都得不到想要的結(jié)果.

   
   

4. 第四個問題,這個問題也很頭疼.我在同一個頁面,有三個地方需要使用到復(fù)制粘貼.頭兩個都沒有問題.但第二個和第三個就有問題了.需求是這樣的:if(條件一){顯示按鈕二}else if(條件二){顯示按鈕三}.也就是其實我這第二個和第三個按鈕同時只顯示一個.問題就在這里.無論點擊那個按鈕,執(zhí)行的復(fù)制操作都是第二個按鈕的.這里我猜了一下原因:這個flash按鈕是按照順序進(jìn)行匹配的.也就是是說:第二個按鈕顯示的時候,點擊按鈕,執(zhí)行的是第二組復(fù)制功能.而第三個按鈕顯示的時候(其實也對于頁面來說也是第二個顯示按鈕,因為第二個隱藏了),點擊按鈕,執(zhí)行的也是第二組復(fù)制功能.

   
   

5. 這一點是第二天補(bǔ)充的:昨天就差一點點,沒有提到這個問題,今天早上就是一上午的時間啊.隱藏的div中,不能正確加載出flash按鈕.這個問題真的是無語了, 搞了好久了.繼續(xù)找答案. 有哪位大俠知道答案,請指點在下,不勝感激.

   
   

   這個問題經(jīng)過一上午的激戰(zhàn),終于解決了,解決的方法是如此的簡單.你不是彈出div么,在彈出div以后重新加載一下這個方法就可以啦.

   
   

   
   

6. 待用

以上是我在做的過程中遇到的問題. 以后慢慢把這些問題解決,在回過頭來補(bǔ)充.

---------------------------------------------------------------------------------------

這個zeroclipboard方法,在獲取文本框內(nèi)容和獲取div內(nèi)容時的方式是不一樣的.下面我們看一下代碼:

參考:http://www.sunzhenghua.com/jquery-zclip-zeroclipboard-copy-paste-demo

在這片文章里說:該插件同樣支持回調(diào)函數(shù)

--------------------------------------------------------------------------------------

最后,看一下效果吧:

1. 首先引入文件:

2. 看一下代碼

只是復(fù)制按鈕背flash按鈕罩住

看js代碼實現(xiàn)復(fù)制功能.