API del portapapeles
La API del portapapeles permite acceder los comandos del portapapeles (cortar, copiar y pegar), así como leer y escribir de manera asíncrona el portapapeles del sistema. Acceder al contenido del portapapeles está sujeta a la API de permisos: El permiso clipboard-write
es concedido automáticamente a las páginas cuando están en la pestaña activa. El permiso clipboard-read
debe ser solicitado, lo que se puede hacer intentando leer directamente el portapapeles.
Esta API está diseñada para reemplazar el acceso al portapapeles usando document.execCommand()
.
Accediendo al portapapeles
En vez de instanciar un objeto Clipboard
, se puede acceder al portapapeles del sistema a través de la variable global Navigator.clipboard
:
navigator.clipboard
.readText()
.then(
(clipText) => (document.querySelector(".editor").innerText += clipText),
);
Esta pieza de código lee el texto que hay en el portapapeles y lo añade al primer elemento que tenga la clase editor
. Desde que readText()
(y también read()
, de hecho) devuelve una cadena de texto vacía si el contenido del portapapeles no es texto, este código es seguro.
Interfaces
Clipboard
Contexto seguro-
Proporciona una interfaz para leer y escribir texto y datos. La especificación se refiere a esto como 'Async Clipboard API.'
ClipboardEvent
Contexto seguro-
Representa la información del evento que se ha disparado. Los eventos que se pueden disparar son:
cortar
,copiar
, ypegar
. La especificación se refiere a esto como 'Clipboard Event API'. ClipboardItem
Contexto seguro-
Representa uno de los objetos del portapapeles, usado en la lectura y escritura de datos.
Especificaciones
Specification |
---|
Clipboard API and events # clipboard-interface |
Clipboard API and events # clipboard-event-interfaces |
Clipboard API and events # clipboarditem |
Compatibilidad con navegadores
api.Clipboard
BCD tables only load in the browser
api.ClipboardEvent
BCD tables only load in the browser
api.ClipboardItem
BCD tables only load in the browser