clipboard.js verwendet HTML-Seiten, um Informationen in die Zwischenablage zu kopieren

Ich arbeite derzeit an einer intelligenten Webbrowser-Anwendung für den Kundenservice. Eine der Anforderungen besteht darin, dass der Kunde, nachdem er die vom System zurückgegebene

-Antwort erhalten hat, auf die Schaltfläche „Antwort kopieren“ klickt, um die Antwort zu kopieren in die Zwischenablage des Systems kopieren. Ich dachte, das wäre ein kleiner Fall, aber ich habe festgestellt, dass es für

nicht einfach ist, eine gute Kompatibilität mit verschiedenen Mainstream-Browsern zu haben. Der Grund dafür ist, dass die meisten modernen Browser aus Sicherheitsgründen keine universelle Schnittstelle zum Kopieren der Zwischenablage bieten (oder wenn doch, ist diese standardmäßig deaktiviert).

Nach der Online-Suche gibt es ungefähr zwei vorhandene Lösungen:

Erstens: Verwenden Sie window.clipboardData in nativem Javascript, um die Funktion zum Kopieren in die Zwischenablage zu implementieren 🎜>Zweitens: Verwenden Sie die Zero Clipboard-Bibliothek.

Nachdem ich es ausprobiert hatte, stellte ich fest, dass keine der vorhandenen Lösungen die Anforderungen erfüllen kann.

Option 1 unterstützt nur den IE-Browser, funktioniert aber nicht mit den Browsern Firefox und Chrome.

Option 2 ist die Lösung, die von den meisten bestehenden Websites (einschließlich Github usw.) übernommen wird. ZeroClipboard ist ein

JS-Plug-in zum Kopieren der Zwischenablage, das auf Flash basiert um eine browserübergreifende Kopierfunktion zu realisieren. Wenn wir ZeroClipboard

verwenden, wird ein kleines Flash-Video (SWF) stillschweigend ausgeblendet, ohne dass dies Auswirkungen auf unsere Benutzeroberfläche hat. Wir müssen nur

verwenden, um die Kopierfunktion zu implementieren.

Die „Null“ in ZeroClipboard bezieht sich auf „unsichtbar, keine Interferenz“.

Wer sich dafür interessiert, kann auf http://my.oschina.net/shniu/blog/298406?p=1 verweisen

Allerdings in modernen Browsern , Flash nimmt allmählich ab und der Firefox-Browser aktiviert Flash standardmäßig nicht, sodass Zero Clipboard auch hinsichtlich der

-Kompatibilität schlecht abschneidet.

Gibt es also eine einfache und kompatible Lösung für einfache Vorgänge wie das Kopieren in die Zwischenablage? manche! Das ist das Open-Source-Projekt Clipboard.js auf Github

(offizielle Website: http://zenorocha.github.io/clipboard.js/) Die Einführung von Clipboard.js auf der offiziellen Website

ist sehr einfach:

　Ein moderner Ansatz zum Kopieren von Text in die Zwischenablage. Kein Flash. Keine Abhängigkeiten. Nur 3 KB. Es sollte nicht schwierig sein, Dutzende davon zu kopieren von Schritten zum Konfigurieren

oder Hunderten von KBs zum Laden. Aber vor allem sollte es nicht von Flash oder einem aufgeblähten Framework abhängen.

Deshalb existiert clipboard.js. (Text kopieren in die Zwischenablage Es sollte nicht kompliziert sein, es sollte nicht viele Schritte und Hunderte von KB-Dateien erfordern, und

außerdem sollte es nicht auf Flash und anderen Frameworks angewiesen sein, deshalb gibt es die Zwischenablage)

Download-Pfad:

Anwendung:

data-clipboard-target-Attribut entspricht dem HTML, das kopiert werden muss. Es kann den Stil der Seite tragen, wenn es darin gespeichert wird Wort. txt ist keine.

Das Beispiel sieht wie folgt aus:

Das data-clipboard-action-Attribut wird verwendet, um kopierte oder ausgeschnittene Inhalte zu unterscheiden.

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

Sie können davon ausgehen, dass die Ausschneideaktion nur bei d5fd7aea971a85678ba271703566ebfd-Elementen funktioniert.

data-clipboard-text; Klartextkopie.

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>　

　

Das obige ist der detaillierte Inhalt vonclipboard.js verwendet HTML-Seiten, um Informationen in die Zwischenablage zu kopieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!