Cut, Copy, Paste auch für Web-Projekte: Mit Clipboard.JS ganz ohne Flash die Zwischenablage nutzen
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)
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?
„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.
Oh je das wäre ja mal grausam…
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.
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.
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?
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.
Paste wird auf der homepage immer noch nicht erwaehnt. (Jetzt: 2019, Artikel von 2015)
test