Le plug-in ZeroClipboard implémente la fonction de copie multi-navigateur (prend en charge Firefox, Chrome, ie6) _ compétences javascript

Cependant, il convient de noter que l'introduction officielle a clairement indiqué que ce plug-in ne prend pas en charge ie6. Ce qui suit fournira l'implémentation de la fonction de copie multi-instanciation Zero Clipboard et la méthode d'écriture compatible avec ie6. !

Téléchargez d'abord ZeroClipboard 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>

Pour la méthode d'implémentation ci-dessus, sauf que ie6 utilise window.clipboardData.setData pour implémenter la fonction de copie, d'autres navigateurs utilisent le plug-in Zero Clipboard pour implémenter la fonction de copie !

Quelques points auxquels vous devez prêter attention lors de l'utilisation de ce plug-in :

1. Les ZeroClipboard.js et ZeroClipboard.swf ci-dessus doivent être placés dans le même chemin. Si ce n'est pas dans le même chemin, vous pouvez utiliser ZeroClipboard.setMoviePath("Flash path"); pour définir l'adresse ZeroClipboard.swf.

2. Analyse de la méthode setCSSEffects() : Lorsque la souris survole ou clique sur le bouton, du fait de l'obstruction du bouton Flash, les css ":hover", ":active" et autres pseudo-classes qui copier le bouton lui-même peut être invalide. La méthode setCSSEffects() résout ce problème. Nous devons d'abord changer la pseudo-classe en classe, comme :

Copier le code Le code est le suivant :

.copyit:survol{
couleur de la bordure :#FF6633;
>
// Vous devez remplacer ":hover" par le ".hover" suivant
.copyit.hover{
couleur de la bordure :#FF6633;
>

3. Analyse de la méthode getHTML() : Si vous souhaitez instancier Flash vous-même sans utiliser la méthode de pièce jointe Zero Clipboard, alors cette méthode peut vous aider. Il accepte deux paramètres, à savoir la largeur et la hauteur de Flash. Ce qui est renvoyé est le code HTML correspondant à Flash. Par exemple :
var html = clip.getHTML( 150, 20 );