Testa l'evento clipboardchange, un modo più efficiente per monitorare gli appunti

Rohan Raja
Rohan Raja
LinkedIn
Patrick Brosset
Patrick Brosset
Home page

Data di pubblicazione: 23 settembre 2025

L'evento clipboardchange è una nuova funzionalità aggiunta a Chrome dal team di Microsoft Edge. Consente di monitorare in modo efficiente le modifiche agli appunti senza il sovraccarico di prestazioni del polling.

Ora puoi testare l'evento clipboardchange con una prova dell'origine sia in Chrome sia in Edge, a partire dalla versione 140. Apprezziamo qualsiasi feedback tu possa fornire durante il test di questa nuova funzionalità, in quanto il nostro obiettivo finale è standardizzarla.

Le sfide del polling degli appunti per rilevare le modifiche

Per sapere quali contenuti sono disponibili negli Appunti di sistema, devi utilizzare metodi di polling inefficienti. Ad esempio, le web app di modifica del testo potrebbero voler attivare diversi pulsanti "Incolla" a seconda che gli appunti contengano testo, un'immagine o contenuti HTML.

L'approccio attuale per raggiungere questo obiettivo richiede di chiamare ripetutamente il metodo navigator.clipboard.read() per controllare i contenuti degli appunti, come mostrato dal seguente snippet di codice:

// 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

Sebbene funzioni, presenta anche svantaggi significativi.

Impatto sulle prestazioni

Il polling costante degli appunti crea un overhead non necessario. Ogni chiamata a navigator.clipboard.read() richiede l'accesso agli appunti a livello di sistema, il che può influire negativamente sulle prestazioni dell'applicazione, soprattutto sui dispositivi con risorse limitate. La frequenza di polling diventa un compromesso tra reattività e prestazioni.

Consumo eccessivo della batteria

Sui dispositivi mobili, il polling frequente degli appunti può contribuire al consumo della batteria poiché l'applicazione accede continuamente alle risorse di sistema anche quando l'utente non copia o incolla attivamente contenuti.

Incoerenze nell'esperienza utente

L'intervallo di polling crea ritardi tra il momento in cui i contenuti vengono copiati e quello in cui l'interfaccia utente si aggiorna per riflettere il nuovo stato degli appunti. Gli utenti potrebbero visualizzare stati del pulsante Incolla obsoleti o riscontrare brevi periodi in cui le opzioni corrette non sono disponibili.

Problemi di privacy con l'over-polling

L'accesso frequente agli appunti può sollevare problemi di privacy, in quanto le applicazioni leggono continuamente i dati degli appunti anche quando non sono cambiati. Questo può sembrare intrusivo per gli utenti che sono attenti alla privacy dei contenuti degli appunti.

L'evento clipboardchange

Per risolvere questi problemi, abbiamo implementato un nuovo evento chiamato clipboardchange e stiamo lanciando una prova dell'origine sia in Edge che in Chrome, in modo da poterlo testare nelle tue app.

Questo evento consente alle applicazioni web di rispondere in modo reattivo alle modifiche degli appunti anziché eseguire il polling in modo proattivo. Viene attivato automaticamente quando i contenuti vengono copiati o tagliati negli appunti da qualsiasi applicazione, gli appunti vengono cancellati o i contenuti vengono incollati (il che potrebbe cancellare gli appunti in alcuni casi). L'evento viene attivato solo quando il documento è attivo.

Puoi ascoltare l'evento clipboardchange aggiungendo un listener all'interfaccia navigator.clipboard come mostrato qui:

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);
});

Principali vantaggi

L'evento clipboardchange offre diversi vantaggi rispetto al polling:

  • Efficiente: gli eventi vengono attivati solo quando si verificano effettivamente modifiche.
  • Rispetto della privacy: l'evento espone solo tipi MIME nativi, non i contenuti effettivi.
  • Nessuna richiesta di autorizzazione: poiché non vengono esposti dati sensibili, non è richiesta alcuna autorizzazione utente.
  • Reattività in tempo reale: l'interfaccia utente si aggiorna immediatamente quando cambiano i contenuti negli appunti.
  • Rilevamento della messa a fuoco: gli eventi vengono attivati solo quando il documento è attivo.

Proprietà types

L'oggetto evento clipboardchange include una proprietà types, che contiene un array di tipi MIME disponibili negli appunti:

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;
});

Comportamento della messa a fuoco

Se si verificano modifiche agli appunti mentre il documento non è attivo, viene attivato un singolo evento clipboardchange quando il documento riacquista lo stato attivo del sistema. Le informazioni storiche sulle modifiche degli appunti non saranno disponibili, solo i tipi disponibili quando la pagina ha acquisito lo stato attivo verranno inclusi nel membro types.

Testa l'evento clipboardchange oggi

Puoi testare il nuovo evento clipboardchange oggi stesso:

  • Localmente, attivando la funzionalità solo nel browser.
  • Oppure nella tua applicazione web di produzione, registrandoti alla prova dell'origine.

Rileva l'evento clipboardchange per una migliore compatibilità

Innanzitutto, poiché si tratta di una nuova funzionalità, devi rilevarne il supporto prima di utilizzarla. Puoi farlo testando l'esistenza della proprietà onclipboardchange su navigator.clipboard, come mostrato qui:

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);
}

Testare localmente

Per testare l'evento clipboardchange solo nel browser:

  1. Apri la pagina about://flags.
  2. Cerca ClipboardChangeEvent nella casella Cerca flag.
  3. Utilizza il menu a discesa e cambia il valore da Default (Predefinito) a Enabled (Attivato).
  4. Riavvia il browser.

Registrati alla prova dell'origine

Per provare l'evento clipboardchange sul tuo sito con utenti reali, registrati alla prova dell'origine in Chrome o Edge. La prova dell'origine verrà eseguita in Chrome ed Edge tra le versioni 140 e 142 (tra il 2 settembre 2025 e il 2 dicembre 2025).

Leggi l'articolo Inizia a utilizzare le prove di origine per scoprire di più sulle prove di origine e su come iniziare.

Demo

Per vedere l'evento in azione, esplora la nostra demo e dai un'occhiata al codice sorgente su GitHub.

Questa demo mostra come utilizzare l'evento clipboardchange per creare un'interfaccia di incolla reattiva che si aggiorna automaticamente in base ai contenuti degli appunti.

Prova a copiare diversi tipi di contenuti (testo, immagini, HTML) e osserva come i pulsanti di incolla si attivano e disattivano in tempo reale senza alcun polling.

Feedback

Ci piacerebbe sapere come funziona l'evento clipboardchange per i tuoi casi d'uso. Fornisci un feedback creando un problema nel repository W3C/clipboard-apis.
Gli indicatori pubblici sul tuo interesse ci aiuteranno, insieme ad altri browser, a capire l'importanza di questa funzionalità per te, il che può contribuire al processo di standardizzazione.

Anche se questo evento può essere utilizzato come miglioramento progressivo, vogliamo standardizzarlo come parte della specifica dell'API Clipboard e alla fine vederlo adottato da tutti i browser. Per il momento, puoi ricorrere al polling o ad altre tecniche di monitoraggio degli appunti.

Scopri di più