Cómo copiar al portapapeles usando JavaScript

 

 

 

Como copiar al portapapeles usando javascript 1

Descubra cómo copiar al portapapeles usando JavaScript utilizando la API del portapapeles

A veces utilizo sitios que ofrecen algo que necesito copiar y pegar en algún lugar. Tal vez una clave API. Tal vez un token de activación para una aplicación que acabo de comprar.

De todos modos, te permiten hacer clic dentro de un cuadro, y el texto dentro de él se copia al portapapeles, así que puedo ir directamente y pegarlo en algún lugar.

¿Cómo podemos implementar esa funcionalidad en nuestros sitios? ¡Usando la API del Portapapeles!

 

Existe otra forma de hacer que la función copiar y pegar funcione, utilizando la document.execCommand()función. No voy a tratar esa opción aquí. La API del Portapapeles está pensada para ser la sucesora de ese comando.

La API del Portapapeles está disponible en el navigator.clipboardobjeto:

navigator.clipboard

La API del portapapeles es relativamente reciente y no todos los navegadores la implementan. Funciona en Chrome, Edge moderno (basado en Chrome), Firefox y Opera.

Puede verificar la existencia de este objeto para asegurarse de que la funcionalidad esté implementada:

if (!navigator.clipboard) { // Clipboard API not available return}

Una cosa que debes comprender ahora es que no puedes copiar/pegar desde el portapapeles sin el permiso del usuario.

El permiso es diferente si estás leyendo o escribiendo en el portapapeles. En caso de que estés escribiendo, todo lo que necesitas es la intención del usuario: debes poner la acción del portapapeles en respuesta a una acción del usuario, como un clic.

Escribiendo en el portapapeles

Digamos que tienes un pelemento en una página HTML:

pSome text/p

Crea un detector de eventos de clic en él y primero verifica si la API del Portapapeles está disponible:

document.querySelector('p').addEventListener('click', async (event) = { if (!navigator.clipboard) { // Clipboard API not available return }})

Ahora, queremos copiar el contenido de esa petiqueta al Portapapeles. Para ello, buscamos el innerTextdel elemento, identificado por event.target:

document.querySelector('p').addEventListener('click', async (event) = { if (!navigator.clipboard) { // Clipboard API not available return } const text = event.target.innerText})

A continuación, llamamos al navigator.clipboard.writeText()método, envolviéndolo en un try/catch para manejar cualquier error que pueda ocurrir. Artículos de danza y ballet

Este es el código completo del ejemplo:

document.querySelector('p').addEventListener('click', async (event) = { if (!navigator.clipboard) { // Clipboard API not available return } const text = event.target.innerText try { await navigator.clipboard.writeText(text) event.target.textContent = 'Copied to clipboard' } catch (err) { console.error('Failed to copy!', err) }})

Puedes ver y probar el ejemplo en Codepen: https://codepen.io/flaviocopes/pen/yLBPaVY/

Leyendo desde el portapapeles

A continuación se muestra cómo leer desde el portapapeles. Tenemos un pelemento:

pSome text/p

y al hacer clic queremos cambiar el contenido del elemento con el contenido almacenado en su portapapeles.

Primero creamos un detector de eventos de clic y verificamos la disponibilidad de la API del Portapapeles:

document.querySelector('p').addEventListener('click', async (event) = { if (!navigator.clipboard) { // Clipboard API not available return }})

Luego llamamos navigator.clipboard.readText(). Con async/await almacenamos el resultado del texto en una textvariable y lo usamos como event.target.textContentvalor:

document.querySelector('p').addEventListener('click', async (event) = { if (!navigator.clipboard) { // Clipboard API not available return } try { const text = await navigator.clipboard.readText() event.target.textContent = text } catch (err) { console.error('Failed to copy!', err) }})

La primera vez que ejecute este código en su sitio, verá aparecer este cuadro:

Debe otorgar permiso al sitio para leer desde el portapapeles; de lo contrario, si cualquier sitio pudiera leer su portapapeles sin su permiso explícito, sería un gran problema de seguridad.

Míralo en Codepen: https://codepen.io/flaviocopes/pen/JjPORbr/




Tal vez te puede interesar:

  1. Cómo generar un número aleatorio entre dos números en JavaScript
  2. Cómo esperar el evento DOM listo en JavaScript simple
  3. Cómo determinar si una fecha es hoy en JavaScript
  4. Cómo contar el número de propiedades en un objeto JavaScript

Cómo copiar al portapapeles usando JavaScript

A veces utilizo sitios que ofrecen algo que necesito copiar y pegar en algún lugar. Tal vez una clave API. Tal vez un token de activación para una aplicació

programar

es

https://aprendeprogramando.es/static/images/programar-como-copiar-al-portapapeles-usando-javascript-2119-0.jpg

2024-11-02

 

Como copiar al portapapeles usando javascript 1
Como copiar al portapapeles usando javascript 1

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences