ZeroClipboard 플러그인은 다중 브라우저 복사 기능을 구현합니다(firefox, chrome, ie6 지원)_javascript 기술

그러나 공식 소개에는 이 플러그인이 IE6을 지원하지 않는다고 분명히 명시되어 있습니다. 다음은 다중 인스턴스화 Zero Clipboard 복사 기능 구현 및 IE6과 호환되는 작성 방법을 제공합니다!

제로클립보드를 먼저 다운로드하세요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>

위 구현 방법의 경우 ie6에서는 window.clipboardData.setData를 사용하여 복사 기능을 구현하는 것을 제외하고 다른 브라우저에서는 Zero Clipboard 플러그인을 사용하여 복사 기능을 구현합니다!

이 플러그인을 사용할 때 주의해야 할 몇 가지 사항:

1. 위의 ZeroClipboard.js와 ZeroClipboard.swf는 같은 경로에 위치해야 합니다. 동일한 경로에 있지 않으면 ZeroClipboard.setMoviePath(“Flash path”)를 사용하여 ZeroClipboard.swf 주소를 설정할 수 있습니다.

2. setCSSEffects() 메소드 분석: Flash 버튼의 방해로 인해 마우스가 버튼 위로 이동하거나 클릭하면 CSS ":hover", ":active" 및 기타 의사 클래스가 복사 버튼 자체가 유효하지 않을 수 있습니다. setCSSEffects() 메서드는 이 문제를 해결합니다. 먼저 의사 클래스를 다음과 같은 클래스로 변경해야 합니다.

코드 복사 코드는 다음과 같습니다.

.copyit:hover{
테두리 색상:#FF6633;
}
// ":hover"를 다음 ".hover"로 변경해야 합니다
.copyit.hover{
테두리 색상:#FF6633;
}

3. getHTML() 메소드 분석: Zero Clipboard 첨부 메소드를 사용하지 않고 Flash를 직접 인스턴스화하려는 경우 이 메소드가 도움이 될 수 있습니다. 이는 두 가지 매개변수, 즉 Flash의 너비와 높이를 허용합니다. 반환되는 것은 Flash에 해당하는 HTML 코드입니다. 예:
var html = clips.getHTML( 150, 20 );