ZeroClipboard plugin implements multi browser copy function of support firefox chrome ie6

  • 2020-03-30 03:48:33
  • OfStack

Download ZeroClipboard (link: #)

<style type="text/css">
 body { font-family:arial,sans-serif; font-size:9pt; }
 .copyit {text-align:center; border:1px solid #FD6001; background-color:#ED730B; margin:10px; padding:2px 5px; cursor:pointer; font-size:12px; border-radius:3px;}
 .copyit.hover { background-color:#FD6001;} { background-color:#d25102;}
 .copy_info{width:260px;height:100px;border:1px solid #ccc;padding:5px;}
<script type="text/javascript" src=""></script>
<script type="text/javascript" src="/js/ZeroClipboard/ZeroClipboard.js"></script>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt"> The first 1 A copy of the content!! </textarea>
<b class="copyit"> Duplicate content </b>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt"> The first 2 A copy of the content!! </textarea>
<b class="copyit"> Duplicate content </b>
<script type="text/javascript">
var clip = null;
function copyThis() {
		//For ie6
		var code=$(this).parents(".clip_container").find(".copycnt").text();
		alert(' Copied content :n'+code);
	ZeroClipboard.setMoviePath("'");//If zeroclipboard.js, zeroclipboard.swf are in the same directory, omit this sentence;
	clip = new ZeroClipboard.Client();
	$('.copyit').mouseover( function() {
	 var code=$(this).parents(".clip_container").find(".copycnt").text();
	 if (clip.div) {//The parent div containing flash has been created, and the flash layer is repositioned when hover
		 //clip.receiveEvent('mouseout', null);
	 //clip.receiveEvent('mouseover', null);
	} );
	clip.addEventListener( 'complete', function(client, text){
	 alert(" Copied content: n"+text);
<textarea style="width:300px;height:300px;">
 Paste copy of the content to try here!! 

The implementation of the above methods, in addition to using Windows ie6. ClipboardData. SetData to realize the replication, other browsers with Zero Clipboard to copy plugin function.

A few points to note when using the plug-in:

1. The above zeroclipboard.js and zeroclipboard.swf shall be placed under the same path. If not in the same path, can use ZeroClipboard. SetMoviePath (" Flash path "); To set the zeroclipboard.swf address.

2, setCSSEffects() method resolution: when the mouse over the button or click, due to Flash button occlusion, so the copy of the button body CSS ":hover", ":active" and other pseudo-classes may be invalid. The setCSSEffects() method solves this problem. First, we need to change the pseudo-class into a class, such as:

//I need to change ":hover" to ". Hover "

GetHTML () method: this method can help if you want to instance a Flash without Zero Clipboard's attaching method. It takes two parameters, the width and height of Flash. The HTML code for Flash is returned. Such as:
Var HTML = clip.gethtml (150, 20);

Related articles: