Post Top Ad

Your Ad Spot

martes, 14 de enero de 2020

Cómo copiar al portapapeles usando JavaScript

A veces uso sitios que proporcionan algo que necesito copiar y pegar en alguna parte. Quizás 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 se copia en el portapapeles, por lo que puedo ir directamente y pegarlo en algún lugar.
¿Cómo podemos implementar esa funcionalidad en nuestros sitios? Usando la API del Portapapeles!
Hay otra forma de hacer que copiar / pegar funcione, utilizando la document.execCommand()funcionalidad. No voy a cubrir esa opción aquí. El API del Portapapeles está destinado a ser el sucesor 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 cromo), Firefox y Opera.
Puede verificar la existencia de este objeto para asegurarse de que se implemente la funcionalidad:
if (!navigator.clipboard) {
  // Clipboard API not available
  return
}
Una cosa que ahora debe comprender es que no puede copiar / pegar desde el portapapeles sin el permiso del usuario.
El permiso es diferente si está leyendo o escribiendo en el portapapeles. En caso de que esté escribiendo, todo lo que necesita es la intención del usuario: debe poner la acción del portapapeles en respuesta a una acción del usuario, como un clic.

Escribir en el portapapeles

Digamos que tiene un pelemento en una página HTML:
<p>Some text</p>
Crea un detector de eventos de clic 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 en el Portapapeles. Lo hacemos buscando innerTextel 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 intento / captura para manejar cualquier error que pueda ocurrir.
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)
  }
})
Aquí puedes ver y probar el ejemplo en Codepen

Leer desde el portapapeles

Aquí se explica cómo leer desde el portapapeles. Tenemos un pelemento:
<p>Some text</p>
y al hacer clic en él, 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
  }
})
Entonces llamamos navigator.clipboard.readText()Usando async / await almacenamos el resultado del texto en una textvariable y lo usamos como el 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:
Permiso para acceder a la API del Portapapeles
Debe otorgar el permiso al sitio para leer desde el portapapeles, de lo contrario, si algún sitio pudiera leer su portapapeles sin su permiso explícito, sería un gran problema de seguridad.
Véalo en Codepen:

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas