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
