ZeroClipboard.js verwendet einen Flash, um mehrere Textfelder zu kopieren

Dieser Artikel stellt hauptsächlich detailliert vor, wie ZeroClipboard.js einen Flash zum Kopieren mehrerer Textfelder verwendet. Es hat einen gewissen Referenzwert.

ZeroClipboard.js ist ein JavaScript Plug-in, das das Kopieren und Einfügen unterstützt, ist derzeit offiziell in Version 2.x, unterstützt jedoch keine Browser unter IE9. Wenn Sie Kompatibilität wünschen, können Sie Version 1.x verwenden. Dies ist die allererste Version : 1.0.7. Diese Version unterstützt IE7 und IE8. Heute stellen wir hauptsächlich vor, wie man mit einem Flash mehrere kopierte Texte unterstützt.

Wenn wir einen Ort kopieren müssen, verwenden wir im Allgemeinen den folgenden Code, um ein neues Objekt zu erstellen:

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

Einzeln:

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

Wenn es mehrere gibt, müssen Sie vier neue Flash-Objekte erstellen? Personen, die es noch nie ausprobiert haben, können dies tun. In diesem Artikel wird eine andere Methode vorgestellt, die darin besteht, die Position des Blitzes und des kopierten Textes zu ändern, wenn sie auf der Grundlage des obigen Blitzes zu einer anderen Schaltfläche wechselt.

HTML-Code für mehrere Texte:

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

Javascript-Code: im oben genannten js Grundsätzlich , fügen Sie den folgenden Code hinzu

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

Bei der Verwendung von ZeroClipboard.js können Kopierfehler auftreten Es gibt beispielsweise andere seltsame Fehler. Da der Inhalt im heutigen IE im Popup-Fenster platziert wird, ist das Kopieren des ersten in Ordnung, aber der zweite meldet einen Fehler mit der Meldung „Es gibt kein solches Objekt“

Nach langem Debuggen konnte ich das Popup-Fenster immer noch nicht ausblenden, es wurde jedoch kein Fehler gemeldet. Daher denke ich, dass es mit dem Ausblenden von Flash zusammenhängt und Anzeige. Ich habe das Ausblenden des Popup-Fensters auf absolute Positionierung geändert und left :-9999px hinzugefügt. Bei der Anzeige wird der korrekte linke Wert angezeigt, und es wird kein Fehler gemeldet.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich sein wird. Ich hoffe auch, dass jeder Script House unterstützt.

Das obige ist der detaillierte Inhalt vonZeroClipboard.js verwendet einen Flash, um mehrere Textfelder zu kopieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!