Datos del portapapeles de JavaScript

La publicación de hoy enseñará cómo detectar datos del portapapeles en eventos de pegar en JavaScript.

Datos del portapapeles de JavaScript

El evento “pegar” se genera cuando el usuario inicia una acción de “pegar” a través de la interfaz de usuario del navegador.

Cuando el cursor está en un contexto editable, la acción predeterminada es pegar el contenido del portapapeles en el documento en la posición del cursor. Un controlador para este evento puede acceder al contenido del portapapeles llamando a getData() en la propiedad clipboardData del evento.

Un controlador de eventos debe cancelar la acción predeterminada con event.preventDefault() e insertar manualmente los datos deseados para anular el comportamiento predeterminado. Es posible crear y enviar un evento de inserción sintética, pero esto no afecta el contenido del documento.

El método addEventListener() de la interfaz EventTarget configura una función que se llamará cada vez que el evento especificado se entregue al objetivo.

Tomemos un ejemplo, definamos dos elementos div. Uno con el origen y otro con el destino.

Source Div contendrá los datos desde los que se copiarán, y el destino será donde pegar los datos copiados.

<div class="source">Hello World!</div>
<div class="destination" contenteditable="true">...Good Bye!</div>

const destinationElement = document.querySelector('div.destination');

destinationElement.addEventListener('paste', (event) => {
  const paste = (event.clipboardData || window.clipboardData).getData('text');
  console.log(paste);

  const selection = window.getSelection();
  selection.deleteFromDocument();
  selection.getRangeAt(0).insertNode(document.createTextNode(paste));
  event.preventDefault();
});

En el ejemplo anterior, primero seleccionamos el elemento de destino usando el querySelector. Una vez seleccionado el elemento, escuchamos el evento pegar.

Tan pronto como el usuario pega los datos, los datos del portapapeles se extraen del evento.

El contenido original se elimina del elemento de destino y el contenido nuevo se inserta en el elemento de destino. Intente ejecutar el código anterior en cualquier navegador que admita el evento pegar; obtendrá el siguiente resultado.

Antes:

Después:

Demostración aquí