Cómo copiar texto al Clipboard con JavaScript

Cuando estás construyendo páginas y aplicaciones web avanzadas, a veces querrás agregar la característica de copiar. Esto le permite a tus usuarios simplemente que hagan un clic a un botón o a un ícono para copiar el texto en vez de que resalten el texto y aprieten un par de botones en el teclado.

Esta característica es mayormente usada cuando alguien necesita copiar un código de activación, una clave de recuperación, code snippet, y así sucesivamente. También puedes agregar funcionalidades como una alerta o texto en la pantalla (el cual podría ser un modal) para informar al usuario que el texto ha sido copiado a su clipboard.

Previamente, lo tendrías que haber manejado con el comando document.execCommand(), pero eso está en desuso (ya no es recomendado). Ahora puedes usar la API Clipboard, el cual te permite responder a comandos de clipboard (cortar, copiar, y pegar) y leer y escribir al clipboard del sistema asincrónicamente.

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

En caso de que estés en un apuro, 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 clipboard');
    } catch (err) {
      console.error('Falló al copiar: ', err);
    }
  }
</script>

Si no estás en un apuro, vamos a entender más sobre la API Clipboard y veamos cómo esto funciona con un proyecto demo.

Cómo verificar los Permisos del Navegador

Es importante saber que la API Clipoard es solamente soportado para páginas que se sirven sobre HTTPS. Deberías también verificar los permisos del navegador antes de intentar escribir al clipboard para verificar si tienes el acceso de escritura. Puedes hacer esto con la petición navigator.permissions:

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

Cómo copiar texto al clipboard

Para copiar texto con la nueva API Clipboard, usarás el método asíncrono writeText(). Este método acepta solamente un parámetro - el texto a copiar a tu clipboard. Esto puede ser una cadena, un literal de plantilla teniendo variables y otras cadenas, o unas variables usadas para tener una cadena.

Ya que este método es asíncrono, regresa unas promesas. Esta promesa está resuelta si el clipboard ha sido actualizado con éxito, y es rechazado de otra manera:

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

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

async function copyContent() {
  try {
    await navigator.clipboard.writeText('Este es el texto a ser copiado');
    console.log('Contenido copiado al clipboard');
    /* Resuelto - texto copiado al clipboard con éxito */
  } catch (err) {
    console.error('Falló al copiar: ', err);
    /* Rechazado - texto falló al copiarse al clipboard */
  }
}

Ejemplo de copiar texto al clipboard

Aquí hay un demo mostrando cómo funciona usando un ejemplo de la vida real. En este ejemplo, estamos pidiendo citas de una API pública de citas. Entonces, cuando haces clic al ícono de copia, la cita y su autor se copian, mostrándote que puedes ajustar lo que copias en el método writeText().

Resumiendo

En este artículo, has aprendido cómo copiar texto al clipboard con JavaScript usando la API Clipboard sin tener que pensar fuera de la caja o instalar alguna librería de JavaScript.

¡Diviértete codificando!

¡Embárcate en un viaje de aprendizaje! Busca más de 200+ artículos experto en desarrollo web. Visita mi blog para contenido más cautivador.