Clipboard.js erfordert kein Flash und ist nicht auf eine JS-Bibliothek angewiesen, um Fähigkeiten zum Kopieren und Schneiden von Texten zu realisieren

Wir platzieren eine Schaltfläche zum Kopieren auf der Webseite, die hauptsächlich dazu dient, Benutzern das Kopieren komplexer Texte wie Links zu erleichtern. In der Vergangenheit haben wir uns auf Flash über JS oder sogar auf die riesige js-Bibliothek von jQuery verlassen Text in die Zwischenablage kopieren. Was ich Ihnen heute vorstellen möchte, ist ein sehr modernes Plug-In, das kein Flash benötigt und nicht auf andere js-Bibliotheken angewiesen ist. Es heißt clipboard.js.

Operationsrendering:

HTML
Laden Sie zunächst die lokale Datei clipboard.js.

<script src="clipboard.min.js"></script> 

Fügen Sie dann den zu kopierenden oder auszuschneidenden Textfeldinhalt und die Schaltfläche im Textkörper hinzu.

<input id="foo" value="http://www.jb51.net/article/73145.htm"> 
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button> 

Hier verwenden wir das Datenattribut von HTML5, um das Kopierobjektziel zu lokalisieren. Es zeigt auf das Textfeld #foo und zeigt an, dass der Wertinhalt in #foo kopiert wird Kopieren. Informationen, die zum Auffordern von Kopierergebnisinformationen verwendet werden.
Es gibt auch ein Attribut „data-clipboard-action“, das definiert, ob der aktuelle Vorgang „Kopieren“ oder „Ausschneiden“ ist. Wenn data-clipboard-action="cut" ist, wird durch Klicken auf die Schaltfläche der Text ausgeschnitten, genau wie bei WORD Betrieb. Natürlich funktioniert der Ausschneidevorgang nur für Text und Textbereiche.
Wir benötigen auch nicht den Inhalt von Elementen wie Eingabe und Textbereich als Kopierobjekte. Wir können den Inhalt, der auf die Schaltfläche kopiert werden soll, über das Attribut ata-clipboard-text definieren. Zwischenablagetext.

<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button> 

Javascript
Fügen Sie den folgenden Code zum 3f1c4e4b6b16bbbd69b2ee476dc4f83a vor 36cc49f0c466276486e50c850b7e4956 hinzu, speichern Sie ihn, öffnen Sie ihn zum Durchsuchen und klicken Sie auf die Schaltfläche zum Kopieren.

new Clipboard('.btn'); 

Natürlich können wir es weiterverarbeiten. Wenn der Kopiervorgang abgeschlossen ist, ist es einfacher, die Meldung „Erfolgreicher Kopiervorgang“ anzuzeigen:

var clipboard = new Clipboard('.btn'); 
 
clipboard.on('success', function(e) { 
 var msg = e.trigger.getAttribute('aria-label'); 
 alert(msg); 
 
 e.clearSelection(); 
}); 

Das Obige ist der Prozess zum Kopieren und Ausschneiden von Texten, für den kein Flash erforderlich ist und ich hoffe, dass er für das Lernen aller hilfreich ist.