JavaScript - Copy-Text-To-Clipboard (Text in Zwischenablage)

Dieses Script, welches nur im Internet-Explorer vollständig funktioniert, ist z.B. Grundlage der Webseite www.channelmoderator.de, auf der man Texte in einer Textarea per Mausklick in die Zwischenablage kopieren kann. Gleiches Script wird ebenfalls für die JavaScript-Beispielseiten verwendet. Ausnahme ist diese. Die Zusammensetzung des Scripts ist sehr aufwendig. Da man auf viele Details achten muss, versuche bitte besonders aufmerksam zu lesen.

Demonstration:

Dies ist der Beispieltext für das Copy-Text-To-Clipboard-Script. Auch HTML Funktionen wie z.b. <img src="bild.jpg"> kann man problemlos in diese Textarea setzen und zum Kopieren bereitstellen.



Einbaucode (Hauptscript):

<script language="JavaScript"> <!-- function copyCode(Celem) { Celem.select(); Celem.focus(); if (document.all) { Celem.createTextRange().execCommand("Copy"); alert("Daten wurden in die Zwischenablage kopiert.\nDu kannst sie jetzt an beliebiger Stelle mit Strg+V einfügen.") } else { alert("Drücke Strg+C, um die markierten Daten in die Zwischenablage zu kopieren.\nDu kannst die Daten anschließend an beliebiger Stelle mit Strg+V einfügen."); } return false; } //--> </script>

Erklärungen zum Hauptcode: Hier finden wir also den Hauptcode. Bitte manuell markieren und kopieren,... Das Script prüft, ob die Daten in die Zwischenablage kopiert worden sind, was nur beim Internet-Explorer funktioniert. Die anderen Browser (z.B. Firefox oder Netscape) markieren zwar den Text, aber der Nutzer muss das Kopieren in die Zwischenablage selbst übernehmen. (z.B. mit Strg-C). An diese Prüfung angeschlossen ist eine Alert-Meldung. Der erste in Klammern stehende Text [alert("...")] wird dann angezeigt, wenn der Internet-Explorer den Text erfolgreich in die Zwischenablage kopierte. Falls nicht, wird automatisch die zweite Alert-Meldung ausgegeben und der Nutzer ist gezwungen, den markierten Text selbst zu kopieren (wie oben genannt z.B. im Firefox oder Netscape). Möchte man für den Fall des geregelten Ablaufes (also das Markieren+Kopieren durch das Script) keine bestätigende Alert-Meldung, so entfernt man im Script einfach die gesamte erste Alert-Zeile [alert("...")]. Denn so ein Hinweisfenster kann schon ziemlich nervig sein, wenn das Script ordnungsgemäß funktioniert. Die zweite Alert-Zeile, also die, die bei Firefox, Netscape usw. aufblinkt, würde ich nicht entfernen. Denn dem User muss ja mitgeteilt werden, dass sein Browser das Kopieren nicht selbstständig durchgeführt hat.

Einbaucode (Textarea und Button):

<textarea readonly name="text1" style="width:300px; height:40px;"> Dies ist der Beispieltext für das Copy-Text-To-Clipboard-Script. Auch HTML Funktionen wie z.b. <img src="bild.jpg"> kann man problemlos in diese Textarea setzen und zum Kopieren bereitstellen. </textarea> <br> <input type="button" value="Text/Daten in die Zwischenablage" onclick="copyCode(document.forms[0].text1)"></input>

Erklärungen zum Einbaucode (Textarea und Button): Wir beginnnen mit dem klassischen Befehl für die Textarea. Normalerweise definiert man Spalten und Reihen mit "cols" und "rows", jedoch empfehle ich die Ausdehnung hier mit CSS festzulegen. Im Beispiel sollen für die Breite 300 Pixel (width:300px;) und für die Höhe 40 Pixel (height:40px;) dienen. Den Text in der Textarea kann man beliebig wählen. Auch sämtliche Sonderzeichen sind ohne UNI-Code einsetzbar. Das wird alle jene freuen, die HTML-Codes (z.b. für Banner-Links) zum Kopieren anbieten wollen. Doch jetzt zum wohl wichtigsten Bestandteil des Einbaucodes für Textarea und Button! Grün hervorgehoben habe ich die Bezeichnung der Textarea und die Bezeichnung des Button-Scriptteils. Jeder der aufmerksam lesen kann wird bemerkt haben, dass die Bezeichnungen (Im Beispiel "text1") gleich sind. Der Name könnte auch "fdbpd7fd3" lauten; Hauptsache er ist im Buttoncode darunter identisch dem Namen der Textarea. Wer jetzt 1 und 1 zusammenzählen kann, wird vorausahnen, dass der Scriptteil des Buttons ja wissen muss, welchen Bereich er im Dokument "ansteuern" soll. Deshalb ist die gleiche "Names"-Bezeichnung von Textarea und Aufrufcode im Button unverzichtbar. Und wer jetzt zu 1 und 1 nochmal 1 dazurechnen kann, der wird wissen, dass für jede weitere Textarea mit ihrem eigenen Button ein neuer Name fällig wird (z.B. text2, text3, ...). Sollen also auf einer Seite mehrere solcher Textareas eingebaut sein, so müssen diese zusammen mit ihrem jeweiligen Button ihre eigene Namenszweisung erhalten.

Der Abschlusscode (zur Demo ist die Textarea + Button mit eingefügt):

<form> <textarea readonly name="text1" style="width:300px; height:40px;"> Dies ist der Beispieltext für das Copy-Text-To-Clipboard-Script. Auch HTML Funktionen wie z.b. <img src="bild.jpg"> kann man problemlos in diese Textarea setzen und zum Kopieren bereitstellen. </textarea> <br> <input type="button" value="Text/Daten in die Zwischenablage" onclick="copyCode(document.forms[0].text1)"></input> </form>

Erklärungen zum Abschlusscode: Wer hätte gedacht, dass dieses unscheinbare HTML-Tag "form" der Funktionalität den Rest gibt. ;) "Mach's mit!" lautet auch hier die Devise. Wichtig: Das Eröffnungs-Tag <form> wird einmalig vor die allererste Textarea im Dokument gesetzt. Das Schließ-Tag </form> wird wird einmalig hinter der alleretzten Button-Funktion im Dokument gesetzt. Für alle die es gerne gerne einfach und in einem Satz haben: Die Homepage sollte mit einem einmaligen <form> beginnen und mit einem einmaligen </form> enden.

Tipp: Kein Button, dafür aber Textlink

<a href="javascript:void(0)" onclick="copyCode(document.forms[0].text1)">Text/Daten in die Zwischenablage</a>

Für alle jene, die lieber einen Textlink statt einen Button platzieren wollen, ist o.g. Code [inkl. href="javascript:void(0)"} nützlich.