ZeroClipboard.js utilise un flash pour copier plusieurs zones de texte

Cet article présente principalement en détail comment ZeroClipboard.js utilise un flash pour copier plusieurs zones de texte. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

ZeroClipboard.js est un JavaScript. le plug-in qui prend en charge le copier-coller est actuellement officiellement en version 2.x, mais il ne prend pas en charge les navigateurs inférieurs à IE9. Si vous souhaitez une compatibilité, vous pouvez utiliser la version 1.x que j'utilise. C'est la toute première version. : 1.0.7. Cette version prend en charge IE7 et IE8. Aujourd'hui, nous présentons principalement comment utiliser un flash pour prendre en charge plusieurs textes copiés.

Généralement, lorsque nous avons besoin de copier un lieu, nous utilisons principalement le code suivant pour créer un nouvel objet :

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

Unique :

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

S'il y en a plusieurs, devez-vous créer quatre nouveaux objets flash ? Les personnes qui ne l'ont jamais essayé peuvent le faire. Cet article partage une autre méthode, qui consiste à modifier la position du flash et le texte copié lors du passage à un autre bouton en fonction du flash ci-dessus.

Code HTML pour plusieurs textes :

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

code javascript : dans le js ci-dessus En gros , ajoutez le code suivant

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

Lors de l'utilisation de ZeroClipboard.js, des erreurs de copie peuvent survenir Cela fonctionne ou là. Il y a d'autres bugs étranges. Par exemple, dans IE aujourd'hui, puisque le contenu est placé dans la fenêtre contextuelle, copier le premier est OK, mais le second signalera une erreur, demandant "Il n'existe pas d'objet de ce type", Après un long débogage , je n'ai toujours pas pu le résoudre. Plus tard, je n'ai pas masqué la fenêtre contextuelle, mais aucune erreur n'a été signalée. Par conséquent, je pense que cela devrait être lié au masquage du flash. et l'affichage. J'ai changé la fenêtre contextuelle masquée en positionnement absolu et ajouté left :-9999px, lors de l'affichage, positionnez la valeur correcte à gauche et aucune erreur ne sera signalée.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. J'espère également que tout le monde soutiendra Script House.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!