Veröffentlicht: 23. September 2025
Das Ereignis clipboardchange ist eine neue Funktion, die von Microsoft Edge-Team in Chrome eingeführt wurde. So können Sie Änderungen an der Zwischenablage effizient überwachen, ohne dass die Leistung durch das Polling beeinträchtigt wird.
Sie können das clipboardchange-Ereignis jetzt mit einem Ursprungstest in Chrome und Edge testen, beginnend mit Version 140.
Wir freuen uns über Feedback, das Sie uns während des Tests dieser neuen Funktion geben. Unser Ziel ist es, sie zu standardisieren.
Herausforderungen beim Abrufen der Zwischenablage zum Erkennen von Änderungen
Um zu wissen, welche Inhalte in der Systemzwischenablage verfügbar sind, müssen Sie ineffiziente Polling-Methoden verwenden. So kann es beispielsweise für Web-Apps zur Textbearbeitung sinnvoll sein, je nachdem, ob die Zwischenablage Text, ein Bild oder HTML-Inhalte enthält, unterschiedliche „Einfügen“-Schaltflächen zu aktivieren.
Der aktuelle Ansatz erfordert, dass Sie die Methode navigator.clipboard.read() wiederholt aufrufen, um den Inhalt der Zwischenablage zu prüfen. Dies ist im folgenden Code-Snippet zu sehen:
// Inefficient polling approach
setInterval(async () => {
try {
const clipboardItems = await navigator.clipboard.read();
updatePasteButtons(clipboardItems);
} catch (err) {
console.error('Failed to read clipboard:', err);
}
}, 1000); // Poll every second
Das funktioniert zwar, hat aber auch erhebliche Nachteile.
Auswirkungen auf die Leistung
Das ständige Abrufen der Zwischenablage verursacht unnötigen Aufwand. Für jeden Aufruf von navigator.clipboard.read() ist der Zugriff auf die Zwischenablage auf Systemebene erforderlich, was sich negativ auf die Leistung Ihrer Anwendung auswirken kann, insbesondere auf Geräten mit begrenzten Ressourcen. Die Abfragehäufigkeit ist ein Kompromiss zwischen Reaktionsfähigkeit und Leistung.
Schnelle Akkuentladung
Auf Mobilgeräten kann häufiges Abrufen der Zwischenablage zu einer schnelleren Entladung des Akkus führen, da die Anwendung kontinuierlich auf Systemressourcen zugreift, auch wenn der Nutzer nicht aktiv Inhalte kopiert oder einfügt.
Inkonsistenzen bei der Nutzerfreundlichkeit
Das Abfrageintervall führt zu Verzögerungen zwischen dem Zeitpunkt, zu dem Inhalte kopiert werden, und dem Zeitpunkt, zu dem die Benutzeroberfläche aktualisiert wird, um den neuen Status der Zwischenablage widerzuspiegeln. Nutzer sehen möglicherweise veraltete Status der Einfügen-Schaltfläche oder es kann kurzzeitig vorkommen, dass die richtigen Optionen nicht verfügbar sind.
Bedenken im Hinblick auf den Datenschutz bei zu häufigen Umfragen
Häufiger Zugriff auf die Zwischenablage kann Bedenken hinsichtlich des Datenschutzes aufwerfen, da Anwendungen die Daten in der Zwischenablage kontinuierlich lesen, auch wenn sie sich nicht geändert haben. Für Nutzer, die auf den Schutz ihrer Zwischenablageinhalte achten, kann dies als aufdringlich empfunden werden.
Das clipboardchange-Ereignis
Um diesen Herausforderungen zu begegnen, haben wir ein neues Ereignis namens clipboardchange implementiert und starten einen Ursprungstest in Edge und Chrome, damit Sie es in Ihren Apps testen können.
Mit diesem Ereignis können Webanwendungen reaktiv auf Änderungen in der Zwischenablage reagieren, anstatt proaktiv danach zu suchen. Sie wird automatisch ausgelöst, wenn Inhalte aus einer beliebigen Anwendung in die Zwischenablage kopiert oder ausgeschnitten werden, die Zwischenablage geleert wird oder Inhalte eingefügt werden (was in einigen Fällen die Zwischenablage leeren kann). Das Ereignis wird nur ausgelöst, wenn das Dokument den Fokus hat.
Sie können das clipboardchange-Ereignis beobachten, indem Sie dem navigator.clipboard-Interface einen Listener hinzufügen, wie hier gezeigt:
navigator.clipboard.addEventListener('clipboardchange', event => {
console.log('Clipboard content changed!');
console.log('Available MIME types:', event.types);
// Update UI based on available formats
updatePasteButtons(event.types);
});
Wichtigste Vorteile
Das clipboardchange-Ereignis bietet mehrere Vorteile gegenüber dem Polling:
- Effizient: Ereignisse werden nur ausgelöst, wenn tatsächlich Änderungen auftreten.
- Datenschutzfreundlich: Das Ereignis gibt nur native MIME-Typen und keine tatsächlichen Inhalte preis.
- Keine Berechtigungsaufforderungen: Da keine vertraulichen Daten offengelegt werden, ist keine Nutzerberechtigung erforderlich.
- Reaktionsfähigkeit in Echtzeit: Die Benutzeroberfläche wird sofort aktualisiert, wenn sich der Inhalt der Zwischenablage ändert.
- Fokusabhängig: Ereignisse werden nur ausgelöst, wenn das Dokument den Fokus hat.
Die types-Property
Das Ereignisobjekt clipboardchange enthält das Attribut types mit einem Array von MIME-Typen, die in der Zwischenablage verfügbar sind:
navigator.clipboard.addEventListener('clipboardchange', event => {
// Example types array: ['text/plain', 'text/html', 'image/png']
const hasText = event.types.includes('text/plain');
const hasImage = event.types.includes('image/png');
const hasHtml = event.types.includes('text/html');
// Enable/disable paste buttons accordingly
document.getElementById('paste-text').disabled = !hasText;
document.getElementById('paste-image').disabled = !hasImage;
document.getElementById('paste-html').disabled = !hasHtml;
});
Fokusverhalten
Wenn Änderungen an der Zwischenablage erfolgen, während das Dokument nicht im Fokus ist, wird ein einzelnes clipboardchange-Ereignis ausgelöst, wenn das Dokument wieder den Systemfokus erhält.
Verlaufsdaten zu Änderungen in der Zwischenablage sind nicht verfügbar. Nur die verfügbaren Typen, als die Seite den Fokus erhielt, werden in das types-Element aufgenommen.
clipboardchange-Event heute testen
Sie können das neue clipboardchange-Ereignis noch heute testen:
- Entweder lokal, indem Sie die Funktion nur in Ihrem Browser aktivieren.
- Oder in Ihrer Produktionswebanwendung, indem Sie sich für den Origin-Testlauf registrieren.
clipboardchange-Ereignis für bessere Kompatibilität erkennen
Da es sich um eine neue Funktion handelt, müssen Sie zuerst prüfen, ob sie unterstützt wird, bevor Sie sie verwenden. Dazu können Sie prüfen, ob das Attribut onclipboardchange für navigator.clipboard vorhanden ist, wie hier gezeigt:
if ('onclipboardchange' in navigator.clipboard) {
// The clipboardchange event is supported
navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
// Fallback to polling or other methods
console.log('clipboardchange event not supported, using fallback');
setInterval(checkClipboard, 2000);
}
Lokal testen
So testen Sie das clipboardchange-Ereignis nur in Ihrem Browser:
- Öffnen Sie die Seite
about://flags. - Suchen Sie im Feld Search flags (Flags suchen) nach
ClipboardChangeEvent. - Ändern Sie im Drop-down-Menü den Wert von Standard zu Aktiviert.
- Starten Sie den Browser neu.
Für den Ursprungstest registrieren
Wenn Sie das clipboardchange-Ereignis auf Ihrer Website mit echten Nutzern testen möchten, melden Sie sich für den Origin-Testlauf in Chrome oder Edge an.
Der Ursprungstest wird in Chrome und Edge zwischen den Versionen 140 und 142 (zwischen dem 2. September 2025 und dem 2. Dezember 2025) durchgeführt.
Weitere Informationen zu Origin Trials und zum Einstieg
Demo
Wenn Sie das Ereignis in Aktion sehen möchten, können Sie sich unsere Demo ansehen und den Quellcode auf GitHub aufrufen.
In dieser Demo wird gezeigt, wie das clipboardchange-Ereignis verwendet werden kann, um eine responsive Einfügeoberfläche zu erstellen, die automatisch auf Grundlage des Inhalts der Zwischenablage aktualisiert wird.
Kopieren Sie verschiedene Arten von Inhalten (Text, Bilder, HTML) und beobachten Sie, wie die Einfügen-Schaltflächen in Echtzeit aktiviert und deaktiviert werden – ganz ohne Polling.
Feedback
Wir würden gern erfahren, wie sich das clipboardchange-Ereignis für Ihre Anwendungsfälle bewährt. Erstellen Sie ein Problem im W3C/clipboard-apis-Repository, um Feedback zu geben.
Öffentliche Signale zu Ihrem Interesse helfen uns und anderen Browsern, die Bedeutung dieser Funktion für Sie zu verstehen, was den Standardisierungsprozess beeinflussen kann.
Auch wenn dieses Ereignis als Progressive Enhancement verwendet werden kann, möchten wir es als Teil der Clipboard API-Spezifikation standardisieren und hoffen, dass es schließlich von allen Browsern übernommen wird. Bis dahin können Sie auf das Abrufen von Daten oder andere Techniken zur Überwachung der Zwischenablage zurückgreifen.