怎么在ZeroClipboard.js中使用flash復(fù)制多個(gè)文本框

怎么在ZeroClipboard.js中使用flash復(fù)制多個(gè)文本框？相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

一般我們需要復(fù)制一個(gè)地方的時(shí)候，大多都使用下面這個(gè)代碼新建一個(gè)對(duì)象：

<div id="J_pop_share">
  <input id="J_video_iframe1" value="<iframe src="http://caibaojian.com/book/"></iframe>" />
  <button id="J_copy_btn1">復(fù)制</button>
</div>

單個(gè)：

var clip = null;//ZeroClipboard.Client對(duì)象 
var current_id = null;//當(dāng)前所在的文本元素id 
//指定ZeroClipboard.swf位置
ZeroClipboard.setMoviePath(location.protocol+"//club.pcauto.com.cn/js/ZeroClipboard.swf"); 
clip = new ZeroClipboard.Client();//創(chuàng)建ZeroClipboard.Client對(duì)象 
clip.setHandCursor(true);//鼠標(biāo)移動(dòng)到元素上之后顯示手型 
clip.glue('J_copy_btn1','J_pop_share');
clip.setText($('#J_video_iframe1').val());
//添加復(fù)制成功之后的操作 
clip.addEventListener('complete', function() { 
  alert('復(fù)制成功'); 
});

如果有多個(gè)的話，是不是需要新建四個(gè)flash對(duì)象呢？可能沒嘗試過的人會(huì)這么做，這篇文章分享另外一種做法，就是在上面這個(gè)flash的基礎(chǔ)上，當(dāng)移動(dòng)到另外一個(gè)按鈕時(shí)，改變flash的位置和復(fù)制的文本。

多個(gè)文本的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">復(fù)制</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">復(fù)制</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">復(fù)制</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">復(fù)制</button>
  </div>
</div>

javascript代碼：在上面js的基礎(chǔ)上，加上下面這個(gè)代碼

//上面的代碼
$(".btn-copy-text").each(function(i){
  var index =i+1;
  $(this).on('mouseover',function(){
    var button_id = $(this).attr('id');//復(fù)制div的id 
    //var text_id = button_id+'_text';//要復(fù)制的元素id 
    var text_id = 'J_video_iframe'+(index);
    move_swf(text_id , button_id); 
  }); 
}); 

//移動(dòng)浮動(dòng)flash div到指定的地方，從而只需要使用一個(gè)flash即可在多個(gè)地方實(shí)現(xiàn)復(fù)制功能 
function move_swf(text_id,button_id) { 
  //重新指定flash浮動(dòng)div位置，用reposition 
  clip.reposition(button_id, 'J_pop_share');
  clip.setText($('#'+text_id).val()); 
}

在使用ZeroClipboard.js時(shí)，可能會(huì)出現(xiàn)復(fù)制不起作用或者其它詭異的bug，例如我今天在IE中，由于內(nèi)容是放在彈窗里面，復(fù)制第一個(gè)是可以的，但第二個(gè)則會(huì)報(bào)錯(cuò)，提示“沒有這個(gè)對(duì)象”，調(diào)試了好久，始終無法解決，后來不隱藏彈窗，卻不會(huì)報(bào)錯(cuò)，所以，我覺得應(yīng)該是flash隱藏和顯示有關(guān)，把彈窗隱藏改用絕對(duì)定位加left:-9999px，顯示的時(shí)候，再定位正確的left值就不會(huì)報(bào)錯(cuò)了。

看完上述內(nèi)容，你們掌握怎么在ZeroClipboard.js中使用flash復(fù)制多個(gè)文本框的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！