Was ist eine Async Clipboard API?

Die Async Clipboard-API bietet Dir als Software-Entwickler die Möglichkeit im Mozilla-Browser, auf Befehle der Zwischenablage wie Ausschneiden, Kopieren und Einfügen – zu reagieren.

Clipboard-Event-API Dokumentation der Async Clipboard API im W3C GitHub

Clipboard-Event-API Dokumentation der Async Clipboard API im W3C GitHub

Wozu brauche ich die Async Clipboard API?

Die Clipboard API ist ein mächtiges Entwickler-Werkzeug, mit dem Du coole Funktionen zur Interaktion mit Webseiten und einer Progressive Web App nutzen kannst.

Damit kannst Du als Developer auch asynchron aus der Systemzwischenablage lesen und in diese schreiben, dann nutzt Du diese Browser-API als Async Clipboard API, also als asynchrone API für Interaktionen mit der Zwischenablage zwischen Deiner App und dem Browser eines Anwenders.

Neue Clipboard Commands für den Mozilla Browser

Diese neue Web-API löst den Zugriff auf die Zwischenablage mit dem Befehl document.execCommand() ab.

Hinweis: Diese API ist in Web Workern nicht verfügbar, dass heisst die API ist nicht über WorkerNavigator zugänglich.

Wie funktioniert eine asynchrone API?

Eine asynchrone API nutzt zum Datenaustausch eine asynchrone Kommunikation zum Datenaustausch.

So funktioniert der Zugriff auf das Browser-Clipboard

Wenn Du in Deiner Web-App dem Benutzer den Zugriff auf die Browser Zwischenablage ermöglichen möchtest, kannst Du jetzt direkt auf die Systemzwischenablage im Browser zugreifen. Dazu erhältst Du den direkten Zugriff indem Du global das Navigator.clipboard ansprichst.

Diese Methode ist deutlich einfacher anstatt durch Instanziierung ein Clipboard-Objekt  zu erstellen.

navigator.clipboard.readText().then(
clipText => document.querySelector(".editor").innerText += clipText);

So funktioniert der sichere Zugriff auf die Browser-Zwischenablage

Dieser Code-Ausschnitt holt den Text aus der Zwischenablage des Browser und fügt diesen Inhalt an das erste Element an, das mit dem Klasseneditor gefunden wird.

Da readText() (und auch read()) einen leeren String zurückgibt, wenn die Zwischenablage keinen Text enthält, ist dieser Code sicher.

Clipboard Event API Dokumentation

Die aktuelle Dokumentation zur Clipboard Event API findest Du im W3C GitHub:

Clipboard API and events
# clipboard-interface

Clipboard API and events
# clipboard-event-interfaces

Clipboard API and events
# clipboarditem