Cómo copiar texto al portapapeles con JavaScript

Original article: How to Copy Text to the Clipboard with JavaScript

Cuando estás construyendo páginas web y aplicaciones avanzadas, a veces querrás añadir la función de copiar. Esto permite a tus usuarios simplemente hacer clic en un botón o ícono para copiar texto en lugar de resaltar el texto y presionar un par de botones en el teclado.

Esta característica se utiliza principalmente cuando alguien necesita copiar un código de activación, clave de recuperación, fragmento de código, etc. También puedes añadir funcionalidades como una alerta o texto en la pantalla (que podría ser un modal) para informar al usuario que el texto ha sido copiado a su portapapeles.

Anteriormente, habrías manejado esto usando document.execCommand(), pero ese método está obsoleto (ya no se recomienda). Ahora puedes usar la API de Clipboard (portapateles), que te permite responder a comandos de portapapeles (cortar, copiar y pegar) y leer y escribir de forma asíncrona en el portapapeles del sistema.

En este artículo, aprenderás cómo escribir (copiar) texto e imágenes al portapapeles con la API de Clipboard.

En caso de que tengas prisa, aquí está el código:

<p id="miTexto">Hola Mundo</p>
<button class="btn" onclick="copiarContenido()">¡Copiar!</button>

<script>
  let texto = document.getElementById('miTexto').innerHTML;
  const copiarContenido = async () => {
    try {
      await navigator.clipboard.writeText(texto);
      console.log('Contenido copiado al portapapeles');
    } catch (err) {
      console.error('Error al copiar: ', err);
    }
  }
</script>

Si no tienes prisa, profundicemos en la API y veamos cómo funciona esto con un proyecto de demostración.

Cómo verificar los permisos del Navegador

Es importante saber que la API de Clipboard sólo es compatible con páginas servidas a través de HTTPS. También debes verificar los permisos del navegador antes de intentar escribir en el portapapeles para confirmar si tienes acceso de escritura. Puedes hacerlo con la consulta navigator.permissions:

navigator.permissions.query({ name: "write-on-clipboard" })
.then((resultado) => {
  if (resultado.state == "granted" || resultado.state == "prompt") {
    alert("¡Permiso de escritura concedido!");
  }
});

Cómo copiar texto al portapapeles

Para copiar texto, usarás el método asíncrono writeText(). Este método acepta solo un parámetro: el texto que se copiará en tu portapapeles. Esto puede ser una cadena de texto, un template literal que contenga variables y otras cadenas de texto, o una variable utilizada para almacenar una cadena de texto.

Dado que este método es asíncrono, devuelve una promesa. Esta promesa se resuelve si el portapapeles ha sido actualizado con éxito y se rechaza en caso contrario:

navigator.clipboard.writeText("Este es el texto a copiar")
.then(() => {
  console.log('Contenido copiado al portapapeles');
  /* Resuelto - texto copiado al portapapeles con éxito */
},() => {
  console.error('Error al copiar');
  /* Rechazado - fallo al copiar el texto al portapapeles */
});

También puedes usar async/await junto con try/catch:

async function copiarContenido() {
  try {
    await navigator.clipboard.writeText('Este es el texto a copiar');
    console.log('Contenido copiado al portapapeles');
    /* Resuelto - texto copiado al portapapeles con éxito */
  } catch (err) {
    console.error('Error al copiar: ', err);
    /* Rechazado - fallo al copiar el texto al portapapeles */
  }
}

Ejemplo de cómo copiar texto al portapapeles

Aquí hay una demostración que muestra cómo funciona usando un ejemplo de la vida real. En este ejemplo, estamos obteniendo citas de una API pública. Luego, cuando haces clic en el ícono de copiar, se copia la cita junto con su autor, mostrando que puedes ajustar lo que copias en el método writeText().

Conclusión

En este artículo, has aprendido cómo copiar texto al portapapeles con JavaScript utilizando la API de Clipboard sin tener que pensar demasiado o instalar alguna biblioteca de JavaScript.

¡Diviértete programando!

¡Embárcate en un viaje de aprendizaje! Explora más de 200 artículos expertos sobre desarrollo web. Visita mi blog para más contenido cautivador de mi parte.