suchen

Heim >Web-Frontend >js-Tutorial >Erzielen Sie das Kopieren und Ausschneiden von Texten, ohne auf Flash oder eine JS-Bibliothek angewiesen zu sein. Quellcode-Download enthalten_Javascript-Kenntnisse

Erzielen Sie das Kopieren und Ausschneiden von Texten, ohne auf Flash oder eine JS-Bibliothek angewiesen zu sein. Quellcode-Download enthalten_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:37:01925Durchsuche

Die Darstellung ist wie folgt:

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.

Demo ansehen Quellcode herunterladen

HTML

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

Code kopieren Der Code lautet wie folgt:


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

Code kopieren Der Code lautet wie folgt:



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 der Text durch Klicken auf die Schaltfläche ausgeschnitten. gefolgt von WORD funktioniert genauso. 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 der Schaltfläche kopiert werden soll, über das Attribut ata-clipboard-text definieren entsprechend ata-clipboard-text .

Code kopieren Der Code lautet wie folgt:


Javascript

Fügen Sie den folgenden Code zum