JavaScript implementiert die Kopierfunktion

Ignorieren Sie die Kompatibilität des Browsers und prüfen Sie die Unterstützung jedes Browsers für die Kopierfunktion:

1. IE-Browser, es gibt drei Lösungen, der Code lautet wie folgt:

[javascript]

function copy(txtid){

var txtObj = document.getElementById(txtid);

if(window.clipboardData){ // Nur IE unterstützt dies Objekt, Firefox und Chrome unterstützen nicht

//1. Kopieren über das ClipboardData-Objekt

//window.clipboardData.clearData();

//window.clipboardData. setData("Text",txtObj.value);

                                                                         txtObj.select();

//document.execCommand("Copy"); // Wird nur von IE unterstützt, Firefox-Berichtssyntax Fehler, Chrome-Ausführungsergebnis gibt false zurück (nicht unterstützt)

//3. Echtzeit-Kopieren über TextRange-Objekt: Sie müssen den Inhalt nicht zuerst auswählen

txtObj.createTextRange().execCommand("Copy");

}

}

function copy(txtid){

var txtObj = document.getElementById(txtid);

if(window.clipboardData) { // Nur IE unterstützt dieses Objekt, Firefox und Chrome unterstützen es nicht

//1. Durch das ClipboardData-Objekt kopieren

//window.clipboardData.clearData();

//window.clipboardData.setData("Text",txtObj.value);

//2. Durch das Dokumentobjekt kopieren: Wählen Sie zuerst den chinesischen Text aus und führen Sie dann den Kopierbefehl aus

//txtObj.select();

//document .execCommand("Copy"); // Wird nur vom IE unterstützt, Firefox meldet einen Syntaxfehler und das Chrome-Ausführungsergebnis gibt false zurück (nicht unterstützt)

//3 über das TextRange-Objekt: Sie müssen nicht zuerst den Inhalt auswählen

txtObj.createTextRange().execCommand("Copy");

}

}

2. Firefox wird über die Schnittstellenmethode implementiert. Aus Sicherheitsgründen schließt Firefox diese Schnittstelle in Versionen nach Version 17. Frühere Versionen sind verfügbar. Der Code lautet wie folgt:

[javascript]

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard) ;

var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interface.nsIClipboard); Stellt den Benutzern keine Informationen zur Verfügung. Stellt Vorgänge in der Zwischenablage bereit. Es ist ersichtlich, dass die Unterstützung der Kopierfunktion nicht in allen Browsern einheitlich ist.

Zero Clipboard Library

Zero Clipboard js-Bibliothek, geschrieben von jhuckaby, die Flash verwendet, um Inhalte in die Zwischenablage zu kopieren. Solange der Browser mit dem Flash-Plugin ausgestattet ist, kann der Inhalt kopiert werden. ActionScript blockiert die Mängel von JavaScript und löst das Problem der Kopierkompatibilität zwischen Browsern.

Das Implementierungsprinzip von Zero Clipboard: Zero Clipboard generiert zunächst eine Flash-Objektbezeichnung, sodass der transparente Flash über der Schaltfläche „Kopieren“ schweben kann Wird nicht die Schaltfläche, sondern Flash angeklickt, wird der benötigte Inhalt auf diese Weise an Flash übertragen und anschließend über Flash in die Systemzwischenablage kopiert.

So verwenden Sie Zero Clipboard

Hinweis: Da es auf Flash basiert, muss Flash verwendet werden Aus Sicherheitsgründen kann es nur in einem Webcontainer (z. B. Apache, Tomcat) ausgeführt werden. Die Schaltfläche wird nicht geladen, wenn man mit der rechten Maustaste auf die Flash-Einstellungen klickt Fügen Sie ZeroClipboard.swf zu einem vertrauenswürdigen Speicherort hinzu. Es scheint, dass es in Ordnung sein sollte. Es funktioniert immer noch nicht. Möglicherweise liegt ein Problem mit meinem lokalen Browser vor.

1> Laden Sie das komprimierte Paket von Zero Clipboard herunter, entpacken Sie es und legen Sie die beiden Dateien im Ordner ZeroClipboard.js und ZeroClipboard.swf in Ihr Projekt ab

2>Führen Sie die Zero Clipboard.js-Datei und den folgenden Code ein: ;

Hinweis: ZeroClipboard.js und ZeroClipboard.swf müssen im selben Pfad platziert werden. Wenn sie sich nicht im selben Pfad befinden, können Sie sie mit ZeroClipboard.setMoviePath() festlegen.

3> Kopieren Sie einfach den Code wie folgt:

[javascript]

var clip = new ZeroClipboard.Client(); // Ein neues Clip-Objekt erstellen

clip.setHandCursor( true ); / Legen Sie den zu kopierenden Text fest, der der Wert des Textfelds sein kann

clip.glue("copy-botton"); // Registrieren Sie eine Schaltfläche für den Clip. Der Parameter ist die ID des Schaltflächenelements. Klicken Sie auf die Schaltfläche, um das Kopieren zu erreichen

var clip = new ZeroClipboard.Client(); // Ein neues Clip-Objekt erstellen

clip.setHandCursor( true ); // Den zu kopierenden Text festlegen, der möglich ist sei der Wert des Textfelds

clip.glue("copy-botton"); // Registrieren Sie eine Schaltfläche für den Clip, und der Parameter ist die ID des Schaltflächenelements. Klicken Sie auf die Schaltfläche, um sie zu kopieren

4> Häufig verwendete Methoden von Zero Clipboard. Es wird empfohlen, den Quellcode direkt anzuzeigen:

reposition(): verhindert, dass die Flash-Schaltfläche falsch ausgerichtet wird, wenn sich die Seitengröße ändert

hide() : Flash-Schaltfläche ausblenden

show() : Flash-Schaltfläche anzeigen

setCSSEffects (): Lösen Sie das Problem des Stilfehlers der Flash-Okklusionsschaltfläche (ändern Sie :hover in .hover).

5>Keine allgemeinen Ereignisse in der Zwischenablage, die Ereignishandlerfunktion ist addEventListener():

Laden: Flash-Button-Ladeereignis

MouseOver: Ereignis „Mausbewegung nach oben“

MouseOut: Ereignis „Mausbewegung nach oben“

MouseDown: Ereignis „Maus nach unten“

MouseUp: Ereignis „Mausfreigabe“

abgeschlossen: Erfolgsereignis kopieren

jquery.zclip-Bibliothek

Da ZeroClipboard auf nativem JavaScript basiert Implementierung: jquery.zclip verwendet jQuery, um Zero Clipboard zu kapseln. Wenn jQuery bereits im Projekt verwendet wird, wird empfohlen, es kleiner zu verwenden.