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 the last line of the script, we have simply added an alert action to inform the user that the data has been copied.

So finally when you click on the button “Copy Text”, data will be copied to the clipboard and you can simply paste by using CRTL + V.

Related Article: 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 an expert as a PHP developer. He has also expert in database design, server maintenance and security. He has achieved this goal only in the short span of 3yrs and still looking forward to achieving 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 *