Detaillierte Erläuterung der Schritte zum Implementieren der Kopierfunktion in clipboard.js

Dieses Mal werde ich Ihnen die Schritte zum Implementieren der Kopierfunktion in clipboard.js ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Implementierung der Kopierfunktion in clipboard.js? , lass uns einen Blick darauf werfen.

Vor kurzem hatte ich bei der Arbeit das Bedürfnis, über einen Button den entsprechenden Inhalt zu kopieren. Ich habe viele Lösungen im Internet gefunden und mich schließlich für die Implementierung des Clipboard.js-Plug-Ins entschieden. Weil es nicht auf Flash oder andere Frameworks angewiesen ist, klein ist, einfach zu verwenden ist und eine gute Kompatibilität aufweist. Nachfolgend finden Sie eine kurze Einführung in die Verwendung.

Wenn Sie Plug-ins einführen, können Sie diese herunterladen oder ein CDN eines Drittanbieters verwenden.

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

Für HTML gibt es zwei Verwendungsmöglichkeiten.

Der erste Typ

//html部分
<input type="text" id="copyValue" />
<button type="button" data-clipboard-target=&#39;#copyValue&#39;>复制</button>
//js部分
var clipboard = new Clipboard('button');
clipboard.on('success',function(e){
 e.clearSelection();
 alert('复制成功');
 });
clipboard.on('error',function(e){
 e.clearSelection();
 alert('复制失败');
 });

Hinweis: Wenn wir eine Schaltfläche verwenden, um den Inhalt eines anderen Elements zu kopieren, können wir diese Methode verwenden. Zu diesem Zeitpunkt wird die Schaltfläche als Auslöseelement und das kopierte Element als Zielelement bezeichnet. Zu diesem Zeitpunkt ist der Wert von data-clipboard-target der Selektor des Zielelements, und das -Attribut von data-clipboard-target wird auf das auslösende Element gesetzt. neu Clipboard() ist ein instanziiertes Objekt und die Parameter können HTML-Element, Elementselektor sein. Es gibt zwei Ereignisse, Erfolg und Fehler, die wir überwachen und unsere eigene Logik implementieren können. Da sich das Zielelement nach Abschluss des Kopiervorgangs im ausgewählten Status befindet, benötigen wir e.clearSelection (), um den ausgewählten Status des Zielelements abzubrechen.
Vorteile: Der kopierte Inhalt kann dynamisch sein. Wenn sich der Wert des Zielelements ändert, ändert sich auch der kopierte Wert.

Anwendbare Szenarien: Der Kopierinhalt ist variabel und nicht festgelegt.

Zweiter Typ

//html部分
<button type="button" data-clipboard-text=&#39;复制内容&#39;>复制</button>
//js部分
new Clipboard('button');

Hinweis: Der Wert von data-clipboard-text ist der Inhalt, den Sie kopieren möchten. Es gibt keine Zielelemente, sondern nur Auslöseelemente.

Nachteile: Der kopierte Inhalt ist statisch, unverändert und wird im Voraus festgelegt.

Anwendbare Szenarien: Der kopierte Inhalt ist fixiert

Für die oben genannten Mängel können wir wie folgt optimieren, sodass der kopierte Inhalt auch dynamisch ist.

//html部分
 <input type="text" id="copyValue" />
 <button type="button" id="copy">复制</button>
//js
$('#copy').on('click', function () {
 var value = $('#copyValue').val();
 $('#copy').attr('data-clipboard-text', value);
 var clipboard = new Clipboard('#copy');
 clipboard.on('success', function (e) {
  alert('复制成功');
 });
 clipboard.on('error', function (e) {
  alert('复制失败');
 });
})

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Vue2.0 Eltern-Kind-Komponenten übertragen Funktionen untereinander (mit Code)

Die Verwendung von JS objektorientiert Detaillierte Erklärung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Implementieren der Kopierfunktion in clipboard.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!