Entwicklung & Design

Cut, Copy, Paste auch für Web-Projekte: Mit Clipboard.JS ganz ohne Flash die Zwischenablage nutzen

(Grafik: Shutterstock)

Oft sind es Kleinigkeiten, die ein Projekt-Volumen in die Höhe schießen lassen. Für den Betrachter ist es meist eine Selbstverständlichkeit, gewisse Funktionalität in bestimmten Bereichen vorzufinden. Doch was unter der Haube steckt, bleibt meist ungesehen. Der Teufel steckt im Detail und so ist es auch bei dem Direktzugriff auf das Clipboard mit Web-Technologien.

Jeder benutzt das Clipboard täglich, es ist wohl eines der meist genutzten System-Funktionen die es gibt – Copy, Cut, Paste. Dabei sollte man meinen, dass dieser jahrelange Begleiter schon eine fundamentale Integration im Web erhalten haben muss. Mit einem einfachen Klick auf ein DOM-Element direkt einen gewissen Bereich in das Clipboard speichern? Sollte kein Problem sein – ist es aber. Der Teufel steckt im Detail und somit gab es lange keine einheitliche Methode, ein solches Feature umzusetzen.

Aktuelle Möglichkeiten auf das Clipboard zuzugreifen

Die Frage nach der besten Lösung geistert schon lange durch das Netz, besonders auf Stackoverflow wurde diese Frage heiß diskutiert. Umwege über einen Prompt-Dialog wurden als indirekte Lösung gezeigt. Die weitverbreitete Lösung, die auch weiterhin GitHub einsetzt, ist ZeroClipboard.

Leider aber ist ZeroClipboard keine reine JavaScript-Lösung. Hier wird eine Flash-Applikation gestartet, die im Hintergrund den Zugriff auf das System-Clipboard ermöglicht. Angesteuert wird es zwar über JavaScript, was wiederum die Flash-Aktion auslöst, doch ohne Flash funktioniert es nicht.

Da wir langsam HTML5-Werbe-Banner halten schon großen Einzug ins Web.

Die Umsetzung mit Clipboard.js

Mit Clipboard.js haben wir jetzt eine reine JavaScript-Umsetzung, die ohne jeglichen Abhängigkeiten direkt auf das System-Clipboard zugreifen kann. Somit wird auch kein Flash mehr benötigt, das im Hintergrund ausgeführt wird. Für die Einrichtung wird das Framework nur runtergeladen und in der jeweiligen Webseite initialisiert. Darauf folgend können Elemente direkt mit der Funktionalität ausgerüstet werden:


<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
<script src="dist/clipboard.min.js"></script>
<script>
new Clipboard('.btn');
</script>

Der Button wird mit der Klasse btn initialisiert und erhält über data-clipboard-target="#foo" das mögliche Ziel. Das Ziel wiederum beinhaltet die Daten, in diesem Fall ein Input-Tag, die im Clipboard gespeichert werden sollen. Sobald jetzt auf den Button gedrückt wird, würde „https://github.com/zenorocha/clipboard.js.git“ im Clipboard gespeichert werden.

Wenn der Button das weitere Attribut data-clipboard-action="cut" erhält, wird der Inhalt ausgeschnitten und nicht nur kopiert. Sollte es darum gehen, einen reinen Copy-Button zu erstellen, ohne ein Ziel anzugeben, kann der Inhalt auch direkt im Button hinterlegt werden. Das funktioniert mit data-clipboard-text="". Events und weitere Optionen dürfen natürlich auch nicht fehlen. In der Dokumentation könnt ihr alle wichtigen Informationen nachschlagen.

Natürlich wäre es zu schön um wahr zu sein, wenn es kein Haken an der Sache geben würde. Das nur moderne Browser Clipboard.js unterstützen, sollte eine Selbstverständlichkeit sein. Doch leider unterstützt der Safari die Funktionalität nur teilweise. Eingesetzt wird die Web-API Selection und execCommand. Wobei die vollständige execCommand-Unterstützung im Safari fehlt und somit das Kopieren in das Clipboard nicht funktioniert. Als Fallback für den Safari wird der Text markiert und eine Info-Box angezeigt, die den Nutzer auffordert, STRG/CMD-C auszuführen.

Der Browser-Support von execCommand. (Screenshot: clipboard.js)

Der Browser-Support von execCommand. (Screenshot: clipboard.js)

Natürlich würde es uns besser gefallen, wenn der Browser-Support vollständig wäre. Trotzdem löst das Framework Clipboard.js unser Problem elegant und einfach. Insgesamt überzeugt Clipboard.js durch das schlanke Framework und die zukunftsorientierte Denkweise. Flash ist tot und es muss eine neue Alternative her. Wünschen wir uns für die Zukunft nur eine noch bessere Abstimmung zwischen den Browsern.

Würdet ihr Clipboard.js auch einsetzen oder ist es euch noch zu experimentell?

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

7 Kommentare
Goran
Goran

„Wünschen wir uns für die Zukunft nur eine noch bessere Abstimmung zwischen den Browsern.“
Ja, bitte. Mir wäre es ganz recht, wenn die sich abstimmen sowas nicht zu erlauben. Ich freu mich schon auf die Werbelinks, die ich ständig im Clipboard mit mir rumschleppe.

Antworten
Anonymous
Anonymous

Oh je das wäre ja mal grausam…

Antworten
Jonathan Schneider

Moin Goran,
da kann ich dich beruhigen. Das Clipboard zu befüllen war schon mit Flash möglich. Auch hier hatten wir keine Werbelinks in unseren Clipboards.

Antworten
Mariusz

Eigentlich eine feinen Sache aber beim Desktop Rechner braucht ich das bestimmt nicht. Für das Handy oder Tablet ist es sehr praktisch, werde es bestimmt für die Handy Optimierung benutzen.

Antworten
herr.meyer
herr.meyer

Sehr cooles Tool, jedoch scheint dieses nur Copy & Cut zu unterstützen. Dazu 2 Fragen:
1. Wieso kann das Tool Paste denn nicht (wäre doch nur konsequent) und
2. Wieso ist in dem Beitrag nicht darauf eingegangen, obwohl dieser mit „Cut, Copy, Paste“ tituliert ist?

Antworten
Jonathan Schneider

Hallo Herr Meyer,
Cut, Copy, Pate wird es tituliert. Es geht dabei aber eher um den Workflow. Ich kann etwas direkt kopieren, ausschneiden und mit meiner Tastenkombination wieder einsetzen. Ich bin mir sicher, eine direkte Unterstützung wird auch folgen.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.