Publicado el 23 de septiembre de 2025
El evento clipboardchange es una nueva función que el equipo de Microsoft Edge agregó a Chrome. Te permite supervisar de manera eficiente los cambios en el portapapeles sin la sobrecarga de rendimiento de la sondeo.
Ahora puedes probar el evento clipboardchange con una prueba de origen en Chrome y Edge, a partir de la versión 140.
Agradecemos cualquier comentario que tengas mientras pruebas esta nueva función, ya que, en última instancia, esperamos estandarizarla.
Los desafíos de sondear el portapapeles para detectar cambios
Para saber qué contenido está disponible en el portapapeles del sistema, debes usar métodos de sondeo ineficientes. Por ejemplo, las apps web de edición de texto podrían querer habilitar diferentes botones de "Pegar" según si el portapapeles contiene texto, una imagen o contenido HTML.
El enfoque actual para lograr esto requiere que llames repetidamente al método navigator.clipboard.read() para verificar el contenido del portapapeles, como se muestra en el siguiente fragmento de código:
// 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
Si bien esto funciona, también tiene desventajas significativas.
Impacto en el rendimiento
La consulta constante del portapapeles crea una sobrecarga innecesaria. Cada llamada a navigator.clipboard.read() requiere acceso al portapapeles a nivel del sistema, lo que puede afectar negativamente el rendimiento de tu aplicación, especialmente en dispositivos con recursos limitados. La frecuencia de sondeo se convierte en una compensación entre la capacidad de respuesta y el rendimiento.
Agotamiento de la batería
En los dispositivos móviles, la consulta frecuente del portapapeles puede contribuir al agotamiento de la batería, ya que la aplicación accede continuamente a los recursos del sistema, incluso cuando el usuario no está copiando ni pegando contenido de forma activa.
Inconsistencias en la experiencia del usuario
El intervalo de sondeo genera retrasos entre el momento en que se copia el contenido y el momento en que se actualiza la IU para reflejar el nuevo estado del portapapeles. Es posible que los usuarios vean estados desactualizados del botón de pegado o experimenten breves períodos en los que las opciones correctas no estén disponibles.
Inquietudes sobre la privacidad relacionadas con el sondeo excesivo
El acceso frecuente al portapapeles puede generar problemas de privacidad, ya que las aplicaciones leen continuamente los datos del portapapeles, incluso cuando no cambiaron. Esto puede resultar intrusivo para los usuarios que se preocupan por la privacidad del contenido del portapapeles.
El evento clipboardchange
Para abordar estos desafíos, implementamos un nuevo evento llamado clipboardchange y lanzamos una prueba de origen en Edge y Chrome para que puedas probarlo en tus apps.
Este evento permite que las aplicaciones web respondan de forma reactiva a los cambios en el portapapeles en lugar de sondearlos de forma proactiva. Se activa automáticamente cuando se copia o corta contenido al portapapeles desde cualquier aplicación, se borra el portapapeles o se pega contenido (lo que puede borrar el portapapeles en algunos casos). El evento solo se activa cuando el documento tiene el enfoque.
Puedes escuchar el evento clipboardchange agregando un objeto de escucha en la interfaz navigator.clipboard, como se muestra aquí:
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);
});
Ventajas principales
El evento clipboardchange ofrece varios beneficios en comparación con el sondeo:
- Eficiente: Los eventos solo se activan cuando realmente ocurren cambios.
- Preserva la privacidad: El evento solo expone tipos MIME nativos, no contenido real.
- No se muestran mensajes de permisos: Como no se expone ningún dato sensible, no se requiere el permiso del usuario.
- Capacidad de respuesta en tiempo real: La IU se actualiza de inmediato cuando cambia el contenido del portapapeles.
- Con reconocimiento del enfoque: Los eventos solo se activan cuando el documento tiene el enfoque.
La propiedad types
El objeto de evento clipboardchange incluye una propiedad types, que contiene un array de tipos de MIME disponibles en el portapapeles:
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;
});
Comportamiento del enfoque
Si se producen cambios en el portapapeles mientras el documento no está enfocado, se activa un solo evento clipboardchange cuando el documento recupera el enfoque del sistema.
No estará disponible la información histórica de los cambios en el portapapeles. Solo se incluirán en el miembro types los tipos disponibles cuando la página haya adquirido el enfoque.
Prueba el evento clipboardchange hoy mismo
Puedes probar el nuevo evento clipboardchange hoy mismo:
- De forma local, habilitando la función solo en tu navegador
- O bien, en tu aplicación web de producción, registrándote en la prueba de origen.
Detecta el evento clipboardchange para mejorar la compatibilidad
Primero, como se trata de una función nueva, deberás detectar si se admite antes de usarla. Para lograrlo, prueba la existencia de la propiedad onclipboardchange en navigator.clipboard, como se muestra aquí:
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);
}
Realiza pruebas locales
Para probar el evento clipboardchange solo en tu navegador, haz lo siguiente:
- Abre la página de
about://flags. - Busca
ClipboardChangeEventen el cuadro Search flags. - Usa el menú desplegable y cambia el valor de Predeterminado a Habilitado.
- Reinicia el navegador.
Regístrate para la prueba de origen
Para probar el evento clipboardchange en tu sitio con usuarios reales, regístrate en la prueba de origen en Chrome o Edge.
La prueba de origen se ejecutará en Chrome y Edge entre las versiones 140 y 142 (entre el 2 de septiembre y el 2 de diciembre de 2025).
Lee Comienza a usar las pruebas de origen para obtener más información sobre ellas y cómo comenzar a usarlas.
Demostración
Para ver el evento en acción, explora nuestra demostración y consulta el código fuente en GitHub.
En esta demostración, se muestra cómo se puede usar el evento clipboardchange para crear una interfaz de pegado responsiva que se actualice automáticamente según el contenido del portapapeles.
Intenta copiar diferentes tipos de contenido (texto, imágenes, HTML) y observa cómo los botones de pegado se habilitan y se inhabilitan en tiempo real sin necesidad de sondeo.
Comentarios
Nos encantaría conocer tu opinión sobre cómo funciona el evento clipboardchange para tus casos de uso. Para proporcionar comentarios, crea un problema en el repositorio de W3C/clipboard-apis.
Los indicadores públicos sobre tu interés nos ayudarán a nosotros y a otros navegadores a comprender la importancia de esta función para ti, lo que puede fundamentar el proceso de estandarización.
Incluso si este evento se puede usar como una mejora progresiva, queremos estandarizarlo como parte de la especificación de la API de Clipboard y, finalmente, ver que todos los navegadores lo adopten. Por el momento, puedes recurrir a la sondeo o a otras técnicas de supervisión del portapapeles.