ZeroClipboard plug-in implements multi-browser copy function (supports firefox, chrome, ie6)

ZeroClipboard plug-in implements multi-browser copy function (supports firefox, chrome, ie6)_javascript skills

WBOY

Release： 2016-05-16 16:38:29

Original

1485 people have browsed it

However, it is worth noting that the official introduction has clearly stated that this plug-in does not support IE6. The following will provide the implementation of the multi-instantiation Zero Clipboard copy function and the writing method compatible with IE6!

Download ZeroClipboard first http://www.jb51.net/jiaoben/24961.html

<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;}.copyit.active { background-color:#d25102;}/*鼠标hover效果,实为调用setCSSEffects()方法*/
 .copy_info{width:260px;height:100px;border:1px solid #ccc;padding:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></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">第1个被复制的内容！！！</textarea>
<b class="copyit">复制内容</b>
</div>
<br/>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第2个被复制的内容！！！</textarea>
<b class="copyit">复制内容</b>
</div>
<script type="text/javascript">
var clip = null;
function copyThis() {
	if($.browser.version==6.0){
		//针对ie6
		$('.copyit').bind("click",function(){
		var code=$(this).parents(".clip_container").find(".copycnt").text();
		window.clipboardData.setData("Text",code);
		alert('被复制的内容:\n'+code);
	  })
	  return;
	}
	ZeroClipboard.setMoviePath("http://img.jb51.net/js/scripts/clipboard.swf'");//如果ZeroClipboard.js, ZeroClipboard.swf放在同一目录下，可省略这句;
	clip = new ZeroClipboard.Client();
	$('.copyit').mouseover( function() {
	 var code=$(this).parents(".clip_container").find(".copycnt").text();
	 clip.setText(code);
	 if (clip.div) {//已创建过包含flash的父层div,则鼠标hover时重新定位flash层的位置
		 //clip.receiveEvent('mouseout', null);
		 clip.reposition(this);
	 }else{
		clip.glue(this)};
	 //clip.receiveEvent('mouseover', null);
	} );
	clip.addEventListener( 'complete', function(client, text){
	 alert("被复制内容：\n"+text);
	});
}
copyThis();
</script>
<textarea style="width:300px;height:300px;">
粘贴复制的内容到这里试试！！
</textarea>

Copy after login

For the above implementation method, except that ie6 uses window.clipboardData.setData to implement the copy function, other browsers use the Zero Clipboard plug-in to implement the copy function!

Some points you should pay attention to when using this plug-in:

1. The above ZeroClipboard.js and ZeroClipboard.swf need to be placed in the same path. If it is not in the same path, you can use ZeroClipboard.setMoviePath(“Flash path”); to set the ZeroClipboard.swf address.

2. Analysis of the setCSSEffects() method: When the mouse moves over or clicks on the button, due to the obstruction of the Flash button, the css ":hover", ":active" and other pseudo-classes that copy the button itself may be Invalid. The setCSSEffects() method solves this problem. First we need to change the pseudo class into a class, such as:

Copy code The code is as follows:

.copyit:hover{

border-color:#FF6633;

}

// Need to change ":hover" to the following ".hover"

.copyit.hover{

border-color:#FF6633;

}

3. Analysis of the getHTML() method: If you want to instantiate Flash yourself without using the Zero Clipboard attachment method, then this method can help. It accepts two parameters, namely the width and height of Flash. What is returned is the HTML code corresponding to Flash. For example:
var html = clip.getHTML( 150, 20 );