La API del portapapeles, disponible en el objeto navigator, permite leer y escribir datos en el portapapeles del usuario. Para utilizar esta API, el usuario debe otorgar permisos a la página web o aplicación mediante la API de permisos, usando los permisos "clipboard-read" y/o "clipboard-write". Esta API está diseñada para reemplazar el objeto document.execCommand(), que ya no está soportado en la mayoría de los navegadores.
Leer del Portapapeles
Para leer del portapapeles, puedes usar el método readText() del objeto navigator.clipboard. Este método devuelve una promesa que se resuelve con el texto del portapapeles.
<!-- Bloque de código eliminado por incompatibilidad -->También puedes usar async/await para leer del portapapeles:
<!-- Bloque de código eliminado por incompatibilidad -->Para leer diferentes tipos de datos, como imágenes, puedes usar el método read() del objeto navigator.clipboard, que devuelve una promesa que se resuelve con un objeto ClipboardItem que contiene los datos del portapapeles.
<!-- Bloque de código eliminado por incompatibilidad -->Escribir al Portapapeles
Para escribir texto al portapapeles, puedes usar el método writeText() del objeto navigator.clipboard. Este método devuelve una promesa que se resuelve cuando el texto se ha copiado al portapapeles.
<!-- Bloque de código eliminado por incompatibilidad -->También puedes usar async/await para escribir al portapapeles:
<!-- Bloque de código eliminado por incompatibilidad -->Para copiar una imagen al portapapeles, puedes usar el método write() del objeto navigator.clipboard, que devuelve una promesa que se resuelve cuando los datos se han copiado al portapapeles.
<!-- Bloque de código eliminado por incompatibilidad -->Compatibilidad de la API del Portapapeles en los Navegadores
La API de Clipboard asíncrona está soportada por la mayoría de los navegadores modernos, aunque con algunas limitaciones:
- Safari: Solo permite escribir en el portapapeles si el usuario ha dado permiso, pero no permite leer del portapapeles.
- Firefox: Permite leer del portapapeles y escribir texto, pero no imágenes.
- Navegadores basados en Chromium (Chrome, Edge, Opera, etc.): No tienen limitaciones, siempre que se cuente con el permiso del usuario.
La API del portapapeles en JavaScript ofrece una forma segura y eficiente de leer y escribir datos en el portapapeles del usuario, reemplazando al obsoleto document.execCommand(). Aunque presenta algunas limitaciones dependiendo del navegador, es una herramienta poderosa para mejorar la interactividad de tus aplicaciones web. Asegúrate de gestionar correctamente los permisos y de tener en cuenta las diferencias en el soporte entre navegadores.