Cómo Copiar Texto al Portapapeles con JavaScript con la API Clipboard

▶

Copiar texto al portapapeles desde una página web puede parecer algo básico, pero detrás hay toda una API moderna y una serie de consideraciones de seguridad importantes. En esta guía te mostraré cómo implementar esta funcionalidad en JavaScript, con ejemplos reales, compatibilidad entre navegadores y algunos trucos que aprendí al aplicarlo en mis propios proyectos.

Cuando copiamos algo desde una aplicación o una web, estamos modificando el portapapeles de nuestro sistema operativo. Y aquí viene un punto muy importante: estamos accediendo al sistema operativo mediante JavaScript.

Te muestro cómo puedes modificar el portapapeles, es decir, cómo implementar la funcionalidad de copiar y pegar usando JavaScript.

¿Qué significa copiar al portapapeles en JavaScript?

Cuando copiamos algo —ya sea un texto, un enlace o un fragmento de código— estamos modificando el portapapeles del sistema operativo. Esto implica una pequeña “conversación” entre el navegador y el SO, algo que JavaScript puede hacer mediante la Clipboard API.

En mi caso, la primera vez que necesité esta funcionalidad fue para permitir que los usuarios copiaran fragmentos de código con un clic. Para ello, se emplea document.execCommand('copy'), ya que ese método está obsoleto. La solución moderna y más segura es navigator.clipboard.writeText().

Usando navigator.clipboard.writeText

La Clipboard API ofrece una forma sencilla y segura de copiar texto al portapapeles. El método navigator.clipboard.writeText() recibe el texto que quieres copiar y devuelve una promesa, porque se trata de una operación asíncrona que interactúa directamente con el sistema operativo.

navigator.clipboard.writeText("Tu texto aquí");

Este método recibe el texto que quieres copiar, y como es una operación que interactúa con el sistema operativo (algo que podría estar ocupado o requerir permisos), funciona como una promesa.

¿Por qué es una promesa?

Cada vez que accedemos a disco o al sistema operativo desde JavaScript, se utiliza una promesa, porque esas operaciones no se resuelven de inmediato.

Por eso aquí también estamos usando una promesa, que se resuelve cuando el texto se ha copiado correctamente al portapapeles. Si quieres hacer algo una vez que se haya copiado, puedes usar .then(), tal como lo hago yo, donde muestro un pequeño toast para notificarle al usuario que la acción se completó:

  btn.addEventListener('click', () => {
    this.$toast.success(this.$t('resource.copied') + "!");
    const text = pre.innerText;
    navigator.clipboard.writeText(text).then(() => {
      // btn.innerText = this.$t('resource.copied');
      this.$toast.success(this.$t('resource.copied') + "!");
    }).catch(err => {
      console.error('Error al copiar: ', err);
    });
  });

Consideraciones de seguridad: HTTPS y permisos del navegador

Un par de cosas que debes tener en cuenta:

• Debes estar en HTTPS para que esto funcione correctamente. Por ejemplo, si trabajas en localhost con HTTPS (como https://localhost), no tendrás problemas.
• Sin embargo, si estás en un entorno inseguro, como un virtual host con http (sin la "s"), te aparecerá un error como el que muestro en pantalla:

  • navigator.clipboard is null

• Esto ocurre porque los navegadores bloquean el acceso al portapapeles en entornos inseguros. En mi caso, la primera vez que lo probé en un entorno local con HTTP, el método simplemente no respondía. Al activar HTTPS, todo funcionó correctamente.

Compatibilidad con navegadores

Si te preocupa que el navegador del usuario sea antiguo o no soporte esta API, puedes hacer una simple validación como esta:

if (navigator.clipboard) {
   // puedes usar clipboard.writeText
} else {
   // muestra un mensaje alternativo
}

Con esto puedes copiar y pegar contenido de forma sencilla usando JavaScript y ofrecer una mejor experiencia al usuario, siempre y cuando respetes los requerimientos de seguridad.

Mejorando la experiencia de usuario (UX)

Más allá de que funcione, es importante que el usuario sepa que el texto se copió correctamente. Puedes mostrar un mensaje, cambiar el texto del botón o lanzar un pequeño toast.

Otra mejora es usar async/await, que hace el código más limpio:

async function copiarTexto() {
 try {
   await navigator.clipboard.writeText("Texto copiado con éxito");
   alert("Texto copiado al portapapeles ✅");
 } catch (err) {
   console.error("No se pudo copiar:", err);
 }
}

También puedes copiar automáticamente al cargar la página o al hacer doble clic, aunque esto debe hacerse con precaución, ya que algunos navegadores lo bloquean si no hay interacción directa del usuario.

Errores comunes y cómo solucionarlos

Error    Causa probable    Solución
navigator.clipboard is undefined    Página sin HTTPS o contexto no seguro    Usa HTTPS o entorno localhost
Promesa rechazada    Permiso denegado o bloqueo del navegador    Reintentar tras interacción del usuario
Nada se copia    Código ejecutado fuera de un evento de usuario    Ejecuta dentro de un click o input

En mi experiencia, el error más habitual es ejecutar la función antes de que el usuario interactúe. Por seguridad, la mayoría de navegadores no permiten copiar sin acción explícita.

Preguntas frecuentes (FAQ)

• ¿Por qué navigator.clipboard no funciona en HTTP?
  • Porque los navegadores solo habilitan la API Clipboard en sitios HTTPS o en localhost.
• ¿Qué navegadores soportan clipboard.writeText()?
  • La mayoría de los navegadores modernos, excepto Internet Explorer.
• ¿Cómo puedo mostrar un mensaje cuando el texto se copia?
  • Puedes usar alert(), un toast o cambiar el texto del botón tras copiar.
• ¿Qué diferencia hay entre execCommand('copy') y clipboard.writeText()?
  • execCommand es una API antigua y poco confiable; clipboard.writeText es el método moderno y seguro.

Conclusión

Copiar texto al portapapeles con JavaScript es una funcionalidad pequeña, pero poderosa. Usando navigator.clipboard.writeText() puedes ofrecer una experiencia fluida, segura y moderna.

En mi caso, aplicar esta técnica en mis proyectos mejoró notablemente la interacción con los usuarios, en la web de Academia, lo implementé para que el usuario pueda copiar los códigos con un solo click.