Gepubliceerd: 23 september 2025
De clipboardchange gebeurtenis is een nieuwe functie die door het Microsoft Edge-team aan Chrome is toegevoegd. Hiermee kunt u wijzigingen in het klembord efficiënt volgen zonder de prestatieoverhead van polling.
U kunt nu de clipboardchange gebeurtenis testen met een origin trial in zowel Chrome als Edge , te beginnen met versie 140. We stellen alle feedback op prijs die u heeft tijdens het testen van deze nieuwe functie, aangezien we deze uiteindelijk hopen te standaardiseren.
De uitdagingen bij het peilen van het klembord om wijzigingen te detecteren
Om te weten welke inhoud beschikbaar is in het klembord van het systeem, moet u inefficiënte pollingmethoden gebruiken. Zo willen webapps voor tekstbewerking mogelijk verschillende 'Plakken'-knoppen inschakelen, afhankelijk van of het klembord tekst, een afbeelding of HTML-inhoud bevat.
De huidige aanpak om dit te bereiken vereist dat u herhaaldelijk de methode navigator.clipboard.read() aanroept om de inhoud van het klembord te controleren, zoals wordt getoond in het volgende codefragment:
// 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
Hoewel dit werkt, brengt het ook belangrijke nadelen met zich mee.
Prestatie-impact
Het constant pollen van het klembord veroorzaakt onnodige overhead. Elke aanroep van navigator.clipboard.read() vereist toegang tot het klembord op systeemniveau, wat een negatieve invloed kan hebben op de prestaties van uw applicatie, vooral op apparaten met beperkte resources. De pollingfrequentie wordt een afweging tussen responsiviteit en prestaties.
Batterij leeglopen
Op mobiele apparaten kan het frequent raadplegen van het klembord bijdragen aan het leeglopen van de batterij, omdat de applicatie voortdurend toegang heeft tot systeembronnen, zelfs als de gebruiker niet actief inhoud kopieert of plakt.
Inconsistenties in de gebruikerservaring
Het pollinginterval zorgt voor vertragingen tussen het moment waarop de inhoud wordt gekopieerd en het moment waarop de gebruikersinterface wordt bijgewerkt om de nieuwe klembordstatus weer te geven. Gebruikers kunnen verouderde plakknopstatussen zien of korte periodes ervaren waarin de juiste opties niet beschikbaar zijn.
Privacyzorgen bij over-polling
Regelmatige toegang tot het klembord kan leiden tot privacyproblemen, omdat applicaties continu klembordgegevens lezen, zelfs als deze niet zijn gewijzigd. Dit kan als storend worden ervaren door gebruikers die privacybewust zijn over de inhoud van hun klembord.
Het clipboardchange
Om deze uitdagingen aan te pakken, hebben we een nieuwe gebeurtenis geïmplementeerd met de naam clipboardchange en lanceren we een proefversie in zowel Edge als Chrome, zodat u deze in uw apps kunt testen.
Met deze gebeurtenis kunnen webapplicaties reactief reageren op wijzigingen in het klembord in plaats van er proactief naar te vragen. De gebeurtenis wordt automatisch geactiveerd wanneer inhoud vanuit een applicatie wordt gekopieerd of geknipt naar het klembord, het klembord wordt gewist of inhoud wordt geplakt (wat in sommige gevallen het klembord kan wissen). De gebeurtenis wordt alleen geactiveerd wanneer de focus op het document ligt.
U kunt naar de clipboardchange gebeurtenis luisteren door een listener toe te voegen aan de navigator.clipboard -interface, zoals hier wordt weergegeven:
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);
});
Belangrijkste voordelen
De clipboardchange gebeurtenis biedt verschillende voordelen ten opzichte van polling:
- Efficiënt : Gebeurtenissen worden alleen geactiveerd wanneer er daadwerkelijk wijzigingen plaatsvinden.
- Privacybeschermend : met dit evenement worden alleen de oorspronkelijke MIME-typen weergegeven, niet de daadwerkelijke inhoud.
- Geen toestemmingsvragen : Omdat er geen gevoelige gegevens worden blootgesteld, is er geen toestemming van de gebruiker vereist.
- Realtime responsiviteit : de gebruikersinterface wordt direct bijgewerkt wanneer de inhoud in het klembord verandert.
- Focusbewust : gebeurtenissen worden alleen geactiveerd als de focus op het document staat.
De eigenschap types
Het clipboardchange gebeurtenisobject bevat een types -eigenschap die een reeks MIME-typen bevat die beschikbaar zijn in het klembord:
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;
});
Focusgedrag
Als er klembordwijzigingen plaatsvinden terwijl het document niet de focus heeft, wordt er één clipboardchange gebeurtenis geactiveerd wanneer het document weer de systeemfocus krijgt. Informatie over historische klembordwijzigingen is niet beschikbaar; alleen de beschikbare typen op het moment dat de pagina de focus kreeg, worden opgenomen in het types .
Test vandaag nog de clipboardchange gebeurtenis
Vandaag kunt u de nieuwe clipboardchange gebeurtenis testen:
- U kunt dit lokaal doen, of door de functie alleen in uw browser in te schakelen.
- Of op uw productiewebapplicatie, door u te registreren voor de oorspronkelijke proefversie .
Detecteer de clipboardchange gebeurtenis voor betere compatibiliteit
Omdat dit een nieuwe functie is, moet u eerst de ondersteuning ervan detecteren voordat u deze kunt gebruiken. U kunt dit doen door de aanwezigheid van de eigenschap onclipboardchange in navigator.clipboard te testen, zoals hier weergegeven:
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);
}
Test lokaal
Om de clipboardchange gebeurtenis alleen in uw browser te testen:
- Open de
about://flagspagina. - Zoek naar
ClipboardChangeEventin het vak Zoekvlaggen . - Gebruik de vervolgkeuzelijst en wijzig de waarde van Standaard naar Ingeschakeld .
- Start uw browser opnieuw.
Meld je aan voor de oorsprongsproef
Om de clipboardchange gebeurtenis op uw site met echte gebruikers uit te proberen, meldt u zich aan voor de Origin-proefversie in Chrome of Edge . De Origin-proefversie loopt in Chrome en Edge tussen versie 140 en 142 (tussen 2 september 2025 en 2 december 2025).
Lees Aan de slag met oorsprongsproeven om meer te weten te komen over oorsprongsproeven en hoe u aan de slag kunt gaan.
Demonstratie
Bekijk onze demo en de broncode op GitHub om het evenement in actie te zien.
In deze demo ziet u hoe u de clipboardchange gebeurtenis kunt gebruiken om een responsieve plakinterface te maken die automatisch wordt bijgewerkt op basis van de inhoud van uw klembord.
Probeer verschillende soorten inhoud te kopiëren (tekst, afbeeldingen, HTML) en zie hoe de plakknoppen in realtime worden in- en uitgeschakeld, zonder dat er naar de tekst hoeft te worden gevraagd!
Feedback
We horen graag van u hoe de clipboardchange gebeurtenis werkt voor uw use cases. Geef feedback door een issue aan te maken in de W3C/clipboard-apis repository .
Openbare signalen over uw interesses helpen ons en andere browsers om het belang van deze functie voor u te begrijpen. Hiermee kunnen we het standaardisatieproces ondersteunen.
Hoewel deze gebeurtenis als een progressieve verbetering kan worden gebruikt, willen we deze standaardiseren als onderdeel van de Clipboard API-specificatie en uiteindelijk door alle browsers laten gebruiken. Voorlopig kunt u terugvallen op polling of andere klembordmonitoringtechnieken.