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

創(chuàng)新互聯(lián)長期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為?？灯髽I(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、做網(wǎng)站，?？稻W(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

Zero Clipboard作為一個獨立的js庫，它利用 Flash 進行復(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:/// 下進行調(diào)試， 你會發(fā)現(xiàn)效果始終不會出現(xiàn)， 請通過 http:// 方式運行)

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

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

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

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

   

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

6. 待用

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

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

這個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ù)制功能.

當(dāng)前題目：點擊按鈕復(fù)制文本內(nèi)容--jqueryZclip--ZeroClipboard
網(wǎng)頁URL：http://www.aaarwkj.com/article24/pegeje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、定制網(wǎng)站、品牌網(wǎng)站制作、ChatGPT、網(wǎng)站營銷、網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)