Copiar al portapapeles en JavaScript: 3 métodos funcionales

Tres formas de copiar texto al portapapeles en JavaScript: desde las antiguas hasta las modernas

¿Alguna vez te has preguntado cómo funciona la magia del botón "Copiar"? Presionas y el enlace, código o código promocional ya está en el portapapeles. Sin destellos, sin desplazamiento, sin movimientos innecesarios. Esta tarea, aparentemente simple, es una de las preguntas más populares en Stack Overflow. Y no es casualidad: la implementación de copiar al portapapeles en JavaScript esconde dificultades, diferencias entre navegadores y hasta tres épocas del desarrollo web.

En este artículo analizaremos todas las formas de copiar texto al portapapeles usando JavaScript: desde el viejo y querido (casi muerto) document.execCommand hasta el moderno y asíncrono navigator.clipboard. Aprenderás no solo cómo copiar texto, sino también cómo hacerlo de forma segura, elegante y con soporte para navegadores antiguos. ¡Allá vamos!

Por qué copiar al portapapeles no es "tan simple"

A primera vista parece: ¿qué tiene de complicado? Tomas el texto, lo envías al portapapeles. Pero los navegadores son paranoicos. No quieren que cualquier script en un sitio web pueda leer o escribir en el portapapeles sin tu conocimiento. Imagina: abres un sitio web y en segundo plano reemplaza la contraseña copiada por "EnvíameBitcoin". Horrible, ¿verdad?

Por eso JavaScript tiene reglas estrictas: la copia solo es posible con una acción activa del usuario (clic, pulsación de tecla). E incluso con esta condición, no todas las API funcionan igual. Vamos a analizarlo.

Método n.º 1: El clásico — document.execCommand('copy')

Cómo funciona

Antes, en la era de los dinosaurios (aproximadamente hasta 2020), la única forma de copiar texto al portapapeles era el truco con execCommand. La idea es simple:

\n
• Crear un textarea o input temporal.
\n
• Colocar el texto deseado dentro.
\n
• Seleccionarlo (mediante select()).
\n
• Llamar a document.execCommand('copy').
\n
• Eliminar el elemento temporal.
\n

Así se ve en código:

function copyToClipboardLegacy(text) {\n    // Creamos un elemento temporal\n    const textarea = document.createElement('textarea');\n    textarea.value = text;\n    // Lo hacemos invisible\n    textarea.style.position = 'fixed';\n    textarea.style.opacity = '0';\n    document.body.appendChild(textarea);\n    // Seleccionamos el texto\n    textarea.select();\n    textarea.setSelectionRange(0, 99999); // Para dispositivos móviles\n    // Copiamos\n    try {\n        const successful = document.execCommand('copy');\n        if (successful) {\n            console.log('¡Texto copiado!');\n        } else {\n            console.error('No se pudo copiar');\n        }\n    } catch (err) {\n        console.error('Error al copiar:', err);\n    }\n    // Limpiamos\n    document.body.removeChild(textarea);\n}

Ventajas y desventajas

Ventajas: funciona incluso en Internet Explorer 9. No requiere permisos.

Desventajas: se considera obsoleto (deprecated). Es síncrono: bloquea el hilo principal mientras copia. Incómodo para copiar grandes volúmenes de datos. Y lo más importante: en navegadores modernos pueden eliminarlo en cualquier momento.

Consejo: si estás escribiendo un proyecto nuevo, no uses execCommand. Pero para dar soporte a navegadores muy antiguos (IE11, Edge antiguo) es la única opción.

Método n.º 2: Lo moderno — Clipboard API (navigator.clipboard)

Cómo funciona

Para reemplazar los parches llegó Clipboard API: asíncrona, segura y flexible. Vive en el objeto navigator.clipboard y no solo puede escribir, sino también leer del portapapeles (con permiso del usuario).

Para copiar se usa el método writeText():

async function copyToClipboardModern(text) {\n    try {\n        await navigator.clipboard.writeText(text);\n        console