ZeroClipboard.js是一個支持復制和粘貼的JavaScript插件，目前官方已經到2.x的版本了，但不支持IE9以下的瀏覽器，而如果要兼容，則可以使用1.x的版本，我使用的是最開始的一個版本：1.0.7的。該版本支持IE7和IE8，今天主要介紹如何使用一個flash支持多個復制文本。
一般我們需要復制一個地方的時候，大多都使用下面這個代碼新建一個對象：
<div id="J_pop_share"> <input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn1">復制</button></div>
單個：
var clip = null;//ZeroClipboard.Client對象 var current_id = null;//當前所在的文本元素id //指定ZeroClipboard.swf位置ZeroClipboard.setMoviePath(location.protocol+"http://club.pcauto.com.cn/js/ZeroClipboard.swf"); clip = new ZeroClipboard.Client();//創建ZeroClipboard.Client對象 clip.setHandCursor(true);//鼠標移動到元素上之后顯示手型 clip.glue('J_copy_btn1','J_pop_share');clip.setText($('#J_video_iframe1').val());//添加復制成功之后的操作 clip.addEventListener('complete', function() { alert('復制成功'); });如果有多個的話，是不是需要新建四個flash對象呢？可能沒嘗試過的人會這么做，這篇文章分享另外一種做法，就是在上面這個flash的基礎上，當移動到另外一個按鈕時，改變flash的位置和復制的文本。
多個文本的HTML代碼：
<div id="J_pop_share"> <div> <input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn1" class="btn-copy-text">復制</button> </div> <div> <input id="J_video_iframe2" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn2" class="btn-copy-text">復制</button> </div> <div> <input id="J_video_iframe3" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn3" class="btn-copy-text">復制</button> </div> <div> <input id="J_video_iframe4" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn4" class="btn-copy-text">復制</button> </div></div>
javascript代碼：在上面js的基礎上，加上下面這個代碼
//上面的代碼$(".btn-copy-text").each(function(i){ var index =i+1; $(this).on('mouseover',function(){ var button_id = $(this).attr('id');//復制div的id //var text_id = button_id+'_text';//要復制的元素id var text_id = 'J_video_iframe'+(index); move_swf(text_id , button_id); }); }); //移動浮動flash div到指定的地方，從而只需要使用一個flash即可在多個地方實現復制功能 function move_swf(text_id,button_id) { //重新指定flash浮動div位置，用reposition clip.reposition(button_id, 'J_pop_share'); clip.setText($('#'+text_id).val()); }在使用ZeroClipboard.js時，可能會出現復制不起作用或者其它詭異的bug，例如我今天在IE中，由于內容是放在彈窗里面，復制第一個是可以的，但第二個則會報錯，提示“沒有這個對象”，調試了好久，始終無法解決，后來不隱藏彈窗，卻不會報錯，所以，我覺得應該是flash隱藏和顯示有關，把彈窗隱藏改用絕對定位加left:-9999px，顯示的時候，再定位正確的left值就不會報錯了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
