12.102015

Cut, Copy & Paste ohne Flash

Sobald man vor der Aufgabe steht etwas in die Zwischenablage zu kopieren kam man um Flash nicht herum. Das ändert sich jetzt. Die meisten modernen Browser unterstützen die neue Javascript Clipboard API.

Damit man sich nicht ein eigenes Script dafür schreiben muss haben die Macher von clipboard.js das für euch übernommen. Dabei raus gekommen ist ein 2KB großes Vanilla Javascript.

clipboardjs

Das funktioniert auch total einfach. Zu erst müssen wir das Script in unsere Webseite einbinden. Das können wir auch direkt über das CDN machen.

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>

Danach initialisieren wir unsere Elemente mit der Clipboard Klasse.

new Clipboard('.copy-to-clipboard');

Jetzt brauchen wir ein Element (z.B. ein Input), deren Wert wir kopieren möchten, und ein Button zum ausführen der Aktion.

<input id="clipboard-target" value="Yeah! Es hat funktioniert!">
<button class="copy-to-clipboard" data-clipboard-target="#clipboard-target">Copy</button>

Das war es auch schon. Für die erweiterte Benutzung stehen noch verschiedene Events und die Möglichkeit alles über das Javascript zu konfigurieren zur Verfügung.

Zwar unterstützen noch nicht alle Browser die Clipboard API aber mit einer zukunftsorientierte Denkweise kann man es in naher Zukunft, wenn nicht jetzt schon, verwenden. Es lohnt sich auf jeden Fall die Alternative im Blick zu behalten.