Copy to clipboard in JavaScript

Ziele des Blogs

Nach dem Lesen dieses Blogs können Sie mithilfe von Java-Skript wissen, wie Daten in die Zwischenablage kopiert werden können.

Nutzen der Kopierfunktion in die Zwischenablage

In der aktuellen Webwelt dreht sich alles um die Benutzererfahrung, die Sie mit Ihrer Website gemacht haben. Während unserer Arbeit an einer beliebigen Site kopieren wir Inhalte von einer Stelle und fügen sie an einer anderen Stelle ein. Es ist für den Benutzer sehr hilfreich, wenn eine Site eine Funktion zum Kopieren per Mausklick bietet. Dies erspart dem Benutzer Zeit und Mühe, den Inhalt auszuwählen und zu kopieren.

Implementierung der Funktion zum Kopieren in die Zwischenablage

Mal sehen, wie wir diese Funktionalität hinzufügen können:

Schritt 1:

Erstellen Sie einen HTML-Code mit einem Absatz, der Inhalt und eine Schaltfläche zum Klicken enthält. Sie können jedes relevante Element anstelle eines Absatzes verwenden, z. B. Textfeld, Textbereich, ausgeblendete Felder usw.

<body> <p id = "txt_knoband"> KnowBand bietet die branchenweit besten Plugins für E-Commerce-Systeme und verfügt über langjährige Erfahrung in der Arbeit mit E-Commerce-Websites. </ p> <button onclick = "onClickCopy ()"> Text kopieren < / button> </ body>

Schritt 2:

Sie müssen eine Funktion onClickCopy () erstellen, die die Daten des Absatzes kopiert. Die Funktion führt einfach "document.execCommand (" copy ")" aus, um die Daten in die Zwischenablage zu kopieren.

Funktion copyOnClick () {var tempInput = document.createElement ("input"); tempInput.value = document.getElementById ("txt_knoband"). innerHTML; document.body.appendChild (tempInput); tempInput.select (); document.execCommand ("copy"); document.body.removeChild (tempInput); alert ("Wert kopiert"); }

In der letzten Zeile des Skripts haben wir einfach eine Warnaktion hinzugefügt, um den Benutzer darüber zu informieren, dass die Daten kopiert wurden. Wenn Sie also auf die Schaltfläche "Text kopieren" klicken, werden die Daten in die Zwischenablage kopiert und Sie können sie einfach mit STRG + V einfügen.

Verwandte Artikel: So setzen Sie Cookies mit JavaScript


Sunny Saurabh

Sunny Saurabh

Sunny Saurabh is an experienced Software engineer in C# and ASP.NET as well as expert as a PHP developer. He has also expert in database design, server maintenance and their security. He has achieved this goal only in the short span of 2yrs and still looking forward to achieve more in the IT industry. He lives in New Delhi and his hobby to write the technical writeups.

Leave a Reply

Your email address will not be published. Required fields are marked *