Element: evento copy

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨julio de 2015⁩.

El eventocopy (copiar) de laAPI del portapapeles se dispara cuando el usuario inicia la acción de copiar por medio de la interfaz del usuario del navegador.

Por defecto, la acción del evento es copiar la selección (si existe) al portapapeles.

Un manejador para este evento permitemodificar el contenido del portapapeles al llamar asetData(format, data) en la propiedadClipboardEvent.clipboardData del evento, y cancelar la acción por defecto del objecto utilizandoevent.preventDefault().

Sin embargo, el manejador no puedeleer los datos del portapapeles.

Es posible construir y lanzar un eventocopysintético, pero esto no afectará al portapapeles del sistema.

Laburbuja del evento, escancelable ycompuesta.

Sintaxis

Use el nombre del evento en métodos comoaddEventListener(), o establezca una propiedad de manejador de eventos.

addEventListener("copy", (event) => {});oncopy = (event) => {};

HTML

html

<div contenteditable="true">Copie el texto de esta caja.</div><div contenteditable="true">Y péguelo en esta otra.</div>

div.source,div.target {  border: 1px solid gray;  margin: 0.5rem;  padding: 0.5rem;  height: 1rem;  background-color: #e9eef1;}

JavaScript

const source = document.querySelector("div.source");source.addEventListener("copy", (event) => {  const selection = document.getSelection();  event.clipboardData.setData("text/plain", selection.toString().toUpperCase());  event.preventDefault();});