Publié le 23 septembre 2025
L'événement clipboardchange est une nouvelle fonctionnalité ajoutée à Chrome par l'équipe Microsoft Edge. Il vous permet de surveiller efficacement les modifications apportées au presse-papiers sans la surcharge de performances liée à l'interrogation.
Vous pouvez désormais tester l'événement clipboardchange avec une version d'évaluation de l'origine dans Chrome et Edge, à partir de la version 140.
N'hésitez pas à nous faire part de vos commentaires pendant que vous testez cette nouvelle fonctionnalité, car nous espérons à terme la standardiser.
Les difficultés liées à l'interrogation du presse-papiers pour détecter les modifications
Pour savoir quel contenu est disponible dans le presse-papiers système, vous devez utiliser des méthodes d'interrogation inefficaces. Par exemple, les applications Web de modification de texte peuvent vouloir activer différents boutons "Coller" selon que le presse-papiers contient du texte, une image ou du contenu HTML.
L'approche actuelle pour y parvenir vous oblige à appeler à plusieurs reprises la méthode navigator.clipboard.read() pour vérifier le contenu du presse-papiers, comme le montre l'extrait de code suivant :
// 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
Bien que cela fonctionne, cette méthode présente des inconvénients majeurs.
Impact sur la performance
L'interrogation constante du presse-papiers crée une surcharge inutile. Chaque appel à navigator.clipboard.read() nécessite un accès au presse-papiers au niveau du système, ce qui peut avoir un impact négatif sur les performances de votre application, en particulier sur les appareils aux ressources limitées. La fréquence d'interrogation devient un compromis entre réactivité et performances.
Décharge de la batterie
Sur les appareils mobiles, l'interrogation fréquente du presse-papiers peut contribuer à décharger la batterie, car l'application accède en permanence aux ressources système, même lorsque l'utilisateur ne copie ni ne colle activement du contenu.
Incohérences dans l'expérience utilisateur
L'intervalle d'interrogation crée des délais entre le moment où le contenu est copié et celui où l'UI est mise à jour pour refléter le nouvel état du presse-papiers. Les utilisateurs peuvent voir des états de bouton de collage obsolètes ou rencontrer de brèves périodes pendant lesquelles les options correctes ne sont pas disponibles.
Problèmes de confidentialité liés à l'interrogation excessive
L'accès fréquent au presse-papiers peut soulever des problèmes de confidentialité, car les applications lisent en permanence les données du presse-papiers, même lorsqu'elles n'ont pas changé. Cela peut être intrusif pour les utilisateurs qui se soucient de la confidentialité du contenu de leur presse-papiers.
Événement clipboardchange
Pour relever ces défis, nous avons implémenté un nouvel événement appelé clipboardchange et nous lançons une phase d'évaluation dans Edge et Chrome afin que vous puissiez le tester dans vos applications.
Cet événement permet aux applications Web de répondre de manière réactive aux modifications du presse-papiers plutôt que de les interroger de manière proactive. Il se déclenche automatiquement lorsque du contenu est copié ou coupé dans le presse-papiers depuis n'importe quelle application, lorsque le presse-papiers est vidé ou lorsque du contenu est collé (ce qui peut vider le presse-papiers dans certains cas). L'événement ne se déclenche que lorsque le document est sélectionné.
Vous pouvez écouter l'événement clipboardchange en ajoutant un écouteur sur l'interface navigator.clipboard, comme indiqué ici :
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);
});
Principaux avantages
L'événement clipboardchange offre plusieurs avantages par rapport au polling :
- Efficace : les événements ne sont déclenchés que lorsque des modifications se produisent réellement.
- Respectueux de la confidentialité : l'événement n'expose que les types MIME natifs, et non le contenu réel.
- Aucun message d'autorisation : aucune donnée sensible n'étant exposée, aucune autorisation de l'utilisateur n'est requise.
- Réactivité en temps réel : l'UI se met à jour immédiatement lorsque le contenu du presse-papiers change.
- Sensible à la sélection : les événements ne se déclenchent que lorsque le document est sélectionné.
Propriété types
L'objet d'événement clipboardchange inclut une propriété types, qui contient un tableau de types MIME disponibles dans le presse-papiers :
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;
});
Comportement de la sélection
Si des modifications du presse-papiers se produisent alors que le document n'est pas au premier plan, un seul événement clipboardchange est déclenché lorsque le document retrouve le focus système.
Les informations historiques sur les modifications apportées au presse-papiers ne seront pas disponibles. Seuls les types disponibles lorsque la page a été sélectionnée seront inclus dans le membre types.
Tester l'événement clipboardchange aujourd'hui
Vous pouvez tester le nouvel événement clipboardchange dès aujourd'hui :
- Localement, en activant la fonctionnalité uniquement dans votre navigateur.
- Vous pouvez également vous inscrire à l'Origin Trial sur votre application Web de production.
Détecter l'événement clipboardchange pour une meilleure compatibilité
Tout d'abord, comme il s'agit d'une nouvelle fonctionnalité, vous devez détecter sa compatibilité avant de l'utiliser. Pour ce faire, testez l'existence de la propriété onclipboardchange sur navigator.clipboard, comme indiqué ici :
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);
}
Tester en local
Pour tester l'événement clipboardchange dans votre navigateur uniquement :
- Ouvrez la page
about://flags. - Recherchez
ClipboardChangeEventdans le champ Rechercher des indicateurs. - Dans le menu déroulant, remplacez la valeur Par défaut par Activé.
- Redémarrez le navigateur.
S'inscrire à la phase d'évaluation de l'origine
Pour tester l'événement clipboardchange sur votre site avec de vrais utilisateurs, inscrivez-vous à l'Origin Trial dans Chrome ou Edge.
L'évaluation de l'origine se déroulera dans Chrome et Edge entre les versions 140 et 142 (entre le 2 septembre 2025 et le 2 décembre 2025).
Pour en savoir plus sur les versions d'essai d'origine et découvrir comment vous lancer, consultez Premiers pas avec les versions d'essai d'origine.
Démo
Pour voir l'événement en action, explorez notre démonstration et consultez le code source sur GitHub.
Cette démo montre comment l'événement clipboardchange peut être utilisé pour créer une interface de collage responsive qui se met à jour automatiquement en fonction du contenu de votre presse-papiers.
Essayez de copier différents types de contenus (texte, images, HTML) et voyez comment les boutons de collage s'activent et se désactivent en temps réel, sans aucune interrogation !
Commentaires
Nous aimerions savoir si l'événement clipboardchange répond à vos cas d'utilisation. Pour nous faire part de vos commentaires, créez un problème dans le dépôt W3C/clipboard-apis.
Les signaux publics concernant votre intérêt nous aideront, ainsi que d'autres navigateurs, à comprendre l'importance de cette fonctionnalité pour vous, ce qui peut éclairer le processus de normalisation.
Même si cet événement peut être utilisé comme amélioration progressive, nous souhaitons le standardiser dans la spécification de l'API Clipboard et, à terme, le voir adopté par tous les navigateurs. Pour l'instant, vous pouvez revenir à l'interrogation ou à d'autres techniques de surveillance du presse-papiers.