Criando um Botão de Copiar para Blocos de Código

Se você já viu alguém ter dificuldade em destacar e copiar manualmente um trecho de código — ou já passou por isso você mesmo — já entende por que um botão de copiar para blocos de código importa. É um pequeno detalhe de UI que faz uma diferença real, especialmente para usuários que navegam por teclado, comandos de voz ou telas sensíveis ao toque.

Este artigo guia você na construção de uma UI limpa e confiável para copiar trechos de código usando a moderna Clipboard API — sem necessidade de bibliotecas.

Como Funciona o Método writeText da Clipboard API

A abordagem moderna para copiar para a área de transferência em JavaScript é navigator.clipboard.writeText(). É baseada em promises, assíncrona e suportada em todos os navegadores atuais.

Duas coisas que você deve saber antes de usá-la:

• Ela requer um contexto seguro. A Clipboard API só funciona sobre HTTPS. No localhost, HTTP simples também é tratado como seguro, então funciona bem para desenvolvimento.
• Deve ser acionada por uma ação do usuário. Chamá-la dentro de um manipulador de evento click satisfaz esse requisito automaticamente.

await navigator.clipboard.writeText("your text here");

Esse é o núcleo de toda a funcionalidade.

Extraindo Texto de um Bloco de Código

Seu HTML provavelmente é parecido com isto:

<pre><code>const greeting = "hello";</code></pre>

Para obter o texto bruto, use textContent — e não innerHTML. Usar innerHTML copiaria as tags HTML junto com o código, o que nunca é o desejado.

const code = document.querySelector("pre code").textContent;

Se seus blocos de código usam um realçador de sintaxe como Prism.js ou Highlight.js, o realçador envolve os tokens em elementos <span>. O textContent remove tudo isso e retorna apenas o texto puro, que é exatamente o que deve ir para a área de transferência do usuário.

Construindo o Botão de Copiar para Blocos de Código

Aqui está uma implementação completa e funcional:

document.querySelectorAll("pre").forEach((block) => {
  const button = document.createElement("button");
  button.type = "button";
  button.textContent = "Copy";
  button.setAttribute("aria-label", "Copy code to clipboard");

  button.addEventListener("click", async () => {
    const code = block.querySelector("code")?.textContent ?? "";

    try {
      await navigator.clipboard.writeText(code);
      button.textContent = "Copied!";
      setTimeout(() => (button.textContent = "Copy"), 2000);
    } catch (err) {
      console.error("Copy failed:", err);
      button.textContent = "Failed";
      setTimeout(() => (button.textContent = "Copy"), 2000);
    }
  });

  block.style.position = "relative";
  block.appendChild(button);
});

Alguns pontos que vale a pena destacar:

• aria-label dá ao botão um nome acessível para leitores de tela, especialmente importante caso você posteriormente substitua o texto por um ícone.
• e.currentTarget é mais seguro que e.target quando seu botão contém elementos filhos, como um ícone SVG — e.target pode apontar para o próprio ícone em vez do botão. (Você pode acessá-lo adicionando o parâmetro event ao manipulador de clique, se necessário.)
• O bloco try/catch lida com negações de permissão ou falhas inesperadas de forma elegante, oferecendo feedback visível ao usuário em vez de um erro silencioso.

E os Navegadores Antigos?

navigator.clipboard tem excelente suporte nos navegadores modernos. Se você precisa dar suporte a ambientes mais antigos, document.execCommand('copy') existe como fallback — mas está obsoleto e é pouco confiável. Use-o apenas como último recurso, atrás de uma verificação de funcionalidade:

if (!navigator.clipboard) {
  // legacy fallback using document.execCommand('copy')
}

Para a maioria dos sites de documentação e ferramentas de desenvolvedor construídos hoje, você pode confiar com segurança apenas na Clipboard API.

Conclusão

Um botão funcional de copiar para blocos de código se resume a três coisas: pegar o texto com textContent, gravá-lo com navigator.clipboard.writeText() e dar ao usuário um feedback claro sobre o sucesso ou falha. Mantenha o botão acessível com um aria-label, trate os erros explicitamente, e você terá uma implementação pronta para produção em menos de 30 linhas de JavaScript puro.

Perguntas Frequentes

Understand every bug

Uncover frustrations, understand bugs and fix slowdowns like never before with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.