這篇文章主要為大家詳細介紹了ZeroClipboard.js使用一個flash複製多個文字框，具有一定的參考價值，感興趣的小伙伴們可以參考一下
ZeroClipboard.js是一個支援複製和貼上的JavaScript插件，目前官方已經到2.x的版本了，但不支援IE9以下的瀏覽器，而如果要相容，則可以使用1.x的版本，我使用的是最開始的一個版本：1.0.7的。此版本支援IE7和IE8，今天主要介紹如何使用一個flash支援多個複製文字。
一般我們需要複製一個地方的時候，大多都使用下面這個程式碼新建一個物件：
<p id="J_pop_share"> <input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" /> <button id="J_copy_btn1">复制</button> </p>
單一：
var clip = null;//ZeroClipboard.Client对象
var current_id = null;//当前所在的文本元素id
//指定ZeroClipboard.swf位置
ZeroClipboard.setMoviePath(location.protocol+"//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程式碼：
<p id="J_pop_share">
<p>
<input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
<button id="J_copy_btn1" class="btn-copy-text">复制</button>
</p>
<p>
<input id="J_video_iframe2" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
<button id="J_copy_btn2" class="btn-copy-text">复制</button>
</p>
<p>
<input id="J_video_iframe3" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
<button id="J_copy_btn3" class="btn-copy-text">复制</button>
</p>
<p>
<input id="J_video_iframe4" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
<button id="J_copy_btn4" class="btn-copy-text">复制</button>
</p>
</p>javascript程式碼：在上面js的基礎上，加上下面這個程式碼
//上面的代码
$(".btn-copy-text").each(function(i){
var index =i+1;
$(this).on('mouseover',function(){
var button_id = $(this).attr('id');//复制p的id
//var text_id = button_id+'_text';//要复制的元素id
var text_id = 'J_video_iframe'+(index);
move_swf(text_id , button_id);
});
});
//移动浮动flash p到指定的地方，从而只需要使用一个flash即可在多个地方实现复制功能
function move_swf(text_id,button_id) {
//重新指定flash浮动p位置，用reposition
clip.reposition(button_id, 'J_pop_share');
clip.setText($('#'+text_id).val());
}#在使用ZeroClipboard.js時，可能會出現複製不起作用或其它詭異的bug，例如我今天在IE中，由於內容是放在彈窗裡面，複製第一個是可以的，但第二個則會報錯，提示“沒有這個物件”，調試了好久，始終無法解決，後來不隱藏彈窗，卻不會報錯，所以，我覺得應該是flash隱藏和顯示有關，把彈窗隱藏改用絕對定位加left:-9999px，顯示的時候，再定位正確的left值就不會報錯了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
以上是ZeroClipboard.js使用一個flash複製多個文字框的詳細內容。更多資訊請關注PHP中文網其他相關文章！
