Copiando para a área de transferência em JavaScript: 3 maneiras funcionais

Três maneiras de copiar texto para a área de transferência em JavaScript: das antigas às modernas

Você já se perguntou como funciona a mágica do botão "Copiar"? Você clica — e o link, código ou código promocional já está na área de transferência. Sem flashes, sem rolagem, sem movimentos desnecessários. Esta tarefa aparentemente simples é uma das perguntas mais populares no Stack Overflow. E não é à toa: a implementação da cópia para a área de transferência em JavaScript esconde armadilhas, diferenças entre navegadores e três épocas inteiras de desenvolvimento web.

Neste artigo, vamos analisar todas as maneiras de copiar texto para a área de transferência usando JavaScript: desde o bom e velho (e quase morto) document.execCommand até o moderno e assíncrono navigator.clipboard. Você aprenderá não apenas como copiar texto, mas também como fazer isso de forma segura, elegante e com suporte para navegadores antigos. Vamos lá!

Por que copiar para a área de transferência não é "simples"

À primeira vista, parece: o que há de tão difícil? Pegue o texto, envie para a área de transferência. Mas os navegadores são paranóicos. Eles não querem que qualquer script em um site possa ler ou escrever na área de transferência sem o seu conhecimento. Imagine: você abre um site e ele, em segundo plano, substitui a senha copiada por "SendBitcoinToMe". Assustador, não é?

Portanto, o JavaScript tem regras rigorosas: a cópia só é possível com uma ação ativa do usuário (clique, pressionamento de tecla). E mesmo com essa condição — nem todas as APIs funcionam da mesma forma. Vamos entender.

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

Como funciona

Antigamente, na era dos dinossauros (aproximadamente antes de 2020), a única maneira de copiar texto para a área de transferência era o truque com execCommand. A ideia é simples:

\n
• Criar um textarea ou input temporário.
\n
• Colocar o texto desejado nele.
\n
• Selecioná-lo (através de select()).
\n
• Chamar document.execCommand('copy').
\n
• Remover o elemento temporário.
\n

Veja como fica no código:

function copyToClipboardLegacy(text) {\n    // Cria um elemento temporário\n    const textarea = document.createElement('textarea');\n    textarea.value = text;\n    // Torna-o invisível\n    textarea.style.position = 'fixed';\n    textarea.style.opacity = '0';\n    document.body.appendChild(textarea);\n    // Seleciona o texto\n    textarea.select();\n    textarea.setSelectionRange(0, 99999); // Para dispositivos móveis\n    // Copia\n    try {\n        const successful = document.execCommand('copy');\n        if (successful) {\n            console.log('Texto copiado!');\n        } else {\n            console.error('Falha ao copiar');\n        }\n    } catch (err) {\n        console.error('Erro ao copiar:', err);\n    }\n    // Limpa\n    document.body.removeChild(textarea);\n}

Prós e contras

Prós: funciona até no Internet Explorer 9. Não requer permissões.

Contras: é considerado obsoleto (deprecated). Síncrono — bloqueia a thread principal enquanto copia. Inconveniente para copiar grandes volumes de dados. E o mais importante — em navegadores modernos, pode ser removido a qualquer momento.

Dica: se você está escrevendo um novo projeto — não use execCommand. Mas para suporte a navegadores muito antigos (IE11, Edge antigo), é a única opção.

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

Como funciona

Substituindo as gambiarras, surgiu a Clipboard API — assíncrona, segura e flexível. Ela vive no objeto navigator.clipboard e sabe não apenas escrever, mas também ler da área de transferência (com permissão do usuário).

Para copiar, usa-se o método writeText():

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