點擊按鈕復制文本內容--jqueryZclip--ZeroClipboard

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

創新互聯長期為近千家客戶提供的網站建設服務，團隊從業經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯網生態環境。為保康企業提供專業的成都網站建設、做網站，保康網站改版等技術服務。擁有10余年豐富建站經驗和眾多成功案例,為您定制開發。

這里我使用的事jquery的zeroclipboard來實現復制功能.代碼內容很簡單,網上也有很多資料.

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

具體實現如下:

jsp頁面:

 <p>
	                                    	<textarea class="h200"  id="jscode">
<!--Ad Survey 廣告加載基礎代碼-->
<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">復制代碼</a>
	                                    </div>

js代碼:

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

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

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

第一個問題也是糾結時間最長的一個問題.這段代碼不能夠在本地環境下運行,必須要部署到服務器上.我測試jquery代碼的時候,習慣現在本地測試,成功后才會轉嫁到項目代碼中.這次吃虧了,這個jquery方法必須在服務器環境下才能運行得到正確的結果,因為瀏覽器對flash文件的限制.(由于游覽器對 Flash 的安全措施，請不要在本地 file:/// 下進行調試，你會發現效果始終不會出現，請通過 http:// 方式運行)
zclip()方法無效:不管怎么樣,程序就是進不來這個方法.多次嘗試,發現當copy函數只返回一句話的時候,afterCopy只返回一句話的時候,該函數才生效.
第二個問題,同時也是第三個問題.為什么copy里不能做更多的邏輯判斷,寫更多的代碼呢?多寫一個alert();都得不到想要的結果.
第四個問題,這個問題也很頭疼.我在同一個頁面,有三個地方需要使用到復制粘貼.頭兩個都沒有問題.但第二個和第三個就有問題了.需求是這樣的:if(條件一){顯示按鈕二}else if(條件二){顯示按鈕三}.也就是其實我這第二個和第三個按鈕同時只顯示一個.問題就在這里.無論點擊那個按鈕,執行的復制操作都是第二個按鈕的.這里我猜了一下原因:這個flash按鈕是按照順序進行匹配的.也就是是說:第二個按鈕顯示的時候,點擊按鈕,執行的是第二組復制功能.而第三個按鈕顯示的時候(其實也對于頁面來說也是第二個顯示按鈕,因為第二個隱藏了),點擊按鈕,執行的也是第二組復制功能.
這一點是第二天補充的:昨天就差一點點,沒有提到這個問題,今天早上就是一上午的時間啊.隱藏的div中,不能正確加載出flash按鈕.這個問題真的是無語了, 搞了好久了.繼續找答案. 有哪位大俠知道答案,請指點在下,不勝感激.
這個問題經過一上午的激戰,終于解決了,解決的方法是如此的簡單.你不是彈出div么,在彈出div以后重新加載一下這個方法就可以啦.
待用