JQuery kopieren

In diesem Artikel werden vier JQuery- und JavaScript -Methoden zum Automatisieren von Zwischenablagekopieren untersucht: ZCLIP, Zero -Zwischenablage, eine Text -Problemumgehung und eine Methode aus einem David Walsh -Tutorial. Jeder Ansatz bietet einzigartige Stärken und Schwächen, die für bestimmte Situationen einige besser geeignet sind.

Der Autor empfiehlt die Kopiertext -Problemumgehung aufgrund seiner relativen Einfachheit im Vergleich zu den anderen Plugin -Optionen.

Es ist wichtig zu beachten, dass das Kopieren von Zwischenablhalten ohne JQuery unter Verwendung von reinem JavaScript erreichbar ist. Die Browserkompatibilität kann jedoch ein Problem sein, da document.execCommand('copy') universelle Unterstützung fehlt. Alternativen wie die Clipboard.js-Bibliothek oder die Clipboard-API bieten eine bessere Kompatibilität für Kreuzbrowser.

Mein heutiges Experiment beinhaltete die Verwendung von JQuery (und einfacher JavaScript), um das Kopieren von Zwischenablhalten zu automatisieren-eine Aufgabe, die leicht über die rechte Klick & GT erfüllt wurde; Kopieren oder Strg C. Im Allgemeinen handelt die execCommand('copy') -Methode dies, scheint jedoch nur im Internet Explorer zu funktionieren. Eine Problemumgehung umfasst die Verwendung einer Flash -SWF -Datei. Es gibt mehrere JQuery -Plugins, und ich habe vier Optionen identifiziert:

1. ZClip: Dieses Plugin funktioniert ausschließlich mit Hyperlinks. Die Kernfunktionalität (nur für dh nur) ist unten gezeigt:

function copy(str) {
    //for IE ONLY!
    window.clipboardData.setData('Text', str);
}

2. Null -Zwischenablage: Ein robustes Zwischenablett -Plugin (Download -Link für die Kürze weggelassen). Ein Ausschnitt seiner Verwendung:

function init() {
    clip = new ZeroClipboard.Client();
    clip.setHandCursor(true);
    clip.addEventListener('load', my_load);
    clip.addEventListener('mouseOver', my_mouse_over);
    clip.addEventListener('complete', my_complete);
    clip.glue('d_clip_button');
}

3. Text -Problemumgehung kopieren: Diese Methode bietet einen einfacheren Ansatz.

JQuery Code:

$(document).ready(function(){
    $('li').live('click', function(){
        var path = $('#pathtonode').html();
        path = path.replace(/ > /g,".");
        addtoppath(path);
    });
    $('#toppathwrap').hide();

    function addtoppath(path) {
        $('#copypath').val(path);
        $('#toppathwrap').show();
        $('#copypath').focus();
        $('#copypath').select();
    }   
});

$('#copypath', 'body')
    .find('a')
        .livequery('click', function() {
            $(this).blur();
            var nodetext = $('#id-of-element-to-copy').html();
            $('#copypath input').focus();
            $('#copypath input').select();
            return false;
        });

HTML -Code:

<div id="toppathwrap">
    <input type="text" id="copypath">
</div>

CSS -Code:

#toppathwrap { position:fixed; top:0px; right:0px; background-color:#F2F1E8; padding:5px; display:none; }

4. David Walsh Tutorial -Methode: Diese Methode verwendet eine JavaScript -Funktion und möglicherweise eine Flash -Komponente für die breitere Kompatibilität.

function copy(inElement) {
  if (inElement.createTextRange) {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
     range.execCommand('Copy');
  } else {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed flashvars="clipboard='+escape(inElement.value)+'" height="0" src="_clipboard.swf" type="application/x-shockwave-flash" width="0"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
}

(Hinweis: Quellverbindungen werden für die Kürze weggelassen, wurden jedoch im ursprünglichen Eingang vorhanden.)

Das obige ist der detaillierte Inhalt vonJQuery kopieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!