ZeroClipboard.js uses one flash to copy multiple text boxes

This article mainly introduces in detail how ZeroClipboard.js uses one flash to copy multiple text boxes. It has certain reference value. Interested friends can refer to it.

ZeroClipboard.js is a The JavaScript plug-in that supports copying and pasting is currently officially version 2.x, but it does not support browsers below IE9. If you want compatibility, you can use version 1.x. I use This is the very first version: 1.0.7. This version supports IE7 and IE8. Today we mainly introduce how to use one flash to support multiple copied texts.

Generally when we need to copy a place, we mostly use the following code to create a new object:

<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>

Single:

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('复制成功'); 
});

If there are multiple, do you need to create four new flash objects? People who have never tried it may do this. This article shares another method, which is to change the position of the flash and the copied text when moving to another button based on the above flash.

HTML code for multiple texts:

<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 code: Based on the above js , add the following code

//上面的代码
$(".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()); 
}

When using ZeroClipboard.js, copying may not work or other problems may occur. Weird bug, for example, in IE today, since the content is placed in the pop-up window, it is OK to copy the first one, but an error will be reported in the second one, prompting "There is no such object", Debugging After trying for a long time, I still couldn't solve it. Later, I didn't hide the pop-up window, but no error was reported. Therefore, I think it should be related to flash hiding and display. I changed the pop-up window hiding to absolute positioning and added left:-9999px. When displaying, if you position the correct left value, no error will be reported.

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope that everyone will support Script House.

The above is the detailed content of ZeroClipboard.js uses one flash to copy multiple text boxes. For more information, please follow other related articles on the PHP Chinese website!