今天,經理讓我做一個功能,復制文本框中的代碼.以前在其他網站上經常見到過這個功能.只不過沒有細細研究,今天也是個機會.
這里我使用的事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以后重新加載一下這個方法就可以啦.
待用
以上是我在做的過程中遇到的問題. 以后慢慢把這些問題解決,在回過頭來補充.
---------------------------------------------------------------------------------------
這個zeroclipboard方法,在獲取文本框內容和獲取div內容時的方式是不一樣的.下面我們看一下代碼:
參考:http://www.sunzhenghua.com/jquery-zclip-zeroclipboard-copy-paste-demo
$(document).ready(function(){ $('#copy-button').zclip({ path : 'ZeroClipboard.swf', copy : $('#content').text() }); // 復制的內容時div,p標簽時,使用上述方式獲取 $('#copy-dynamic').zclip({ path : 'ZeroClipboard.swf', copy : function(){ return $('input#dynamic').val(); } }); // 復制的內容為input,textarea表單輸入框時,使用第二種方式獲取});在這片文章里說:該插件同樣支持回調函數
$(document).ready(function(){ $("#copy-callback").zclip({ path : 'ZeroClipboard.swf', copy : $('#callback-paragraph').text(), beforeCopy:function(){ // 復制的內容之前,將文字顏色置為××× $('#callback-paragraph').css('background','yellow'); $(this).css('color','orange'); }, afterCopy:function(){ // 復制完成之后,文字的顏色設置為粉色 $('#callback-paragraph').css('background','pink'); $(this).css('color','purple'); } });});--------------------------------------------------------------------------------------
最后,看一下效果吧:
1. 首先引入文件:
2. 看一下代碼
只是復制按鈕背flash按鈕罩住
看js代碼實現復制功能.
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
