Tutorial: Como implementar Copy to Clipboard com JavaScript

Publicado em 16-01-2025

1. Introdução

A funcionalidade "Copiar para a Área de Transferência" é amplamente utilizada em aplicativos web modernos, seja para copiar textos, links ou códigos rapidamente. Com JavaScript, é simples implementar essa funcionalidade, seja com APIs modernas ou métodos mais básicos.

2. O que vamos construir

Vamos criar um botão que, ao ser clicado, copia um texto para a área de transferência.

Passo a passo

1. Configuração do HTML

Crie um botão e um elemento para exibir o texto que será copiado.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Copy to Clipboard</title>
</head>
<body>
  <div>
    <p id="text-to-copy">Este é o texto que será copiado para a área de transferência.</p>
    <button id="copy-btn">Copiar Texto</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

2. Adicione o JavaScript

Agora, implementamos a lógica para copiar o texto quando o botão for clicado.

arquivo script.js

// Seleciona o texto e o botão
const textToCopy = document.getElementById('text-to-copy');
const copyButton = document.getElementById('copy-btn');
// Adiciona o evento de clique no botão
copyButton.addEventListener('click', () => {
  // Cria um elemento de área de texto temporário
  const tempTextArea = document.createElement('textarea');
  // Define o texto que será copiado
  tempTextArea.value = textToCopy.textContent;
  // Adiciona o elemento temporário ao DOM
  document.body.appendChild(tempTextArea);
  // Seleciona o conteúdo do textarea
  tempTextArea.select();
  tempTextArea.setSelectionRange(0, 99999); // Para navegadores móveis
  // Executa o comando "copy"
  document.execCommand('copy');
  // Remove o elemento temporário do DOM
  document.body.removeChild(tempTextArea);
  // Feedback para o usuário
  alert('Texto copiado para a área de transferência!');
});

3. Estilização com CSS (Opcional)

Adicione um toque visual ao botão.

<style>
  body {
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  #copy-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
  }
  #copy-btn:hover {
    background-color: #45a049;
  }
</style>

4. Testando

Abra o arquivo HTML no navegador.
Clique no botão "Copiar Texto".
Cole em algum lugar (Ctrl+V ou Cmd+V) para verificar se o texto foi copiado.