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:

js
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, y pegar. 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

Véase también