Como copiar textos para a Área de Transferência usando JavaScript

Por: Angelo Luis Ferreira | 04/07/2025 Acessos: 215

Objetivo

O objetivo deste tutorial é ensinar, de forma prática e direta, como utilizar a API moderna do JavaScript para copiar textos para a área de transferência do usuário. Você aprenderá como implementar essa funcionalidade em botões, formulários e elementos interativos, melhorando a experiência do usuário em aplicações web. Também abordaremos as boas práticas, requisitos de segurança e exemplos reais de uso dessa técnica no desenvolvimento front-end.

Definições

Web API ou API moderna do JavaScript

A API moderna do JavaScript (ou Web API) é um conjunto de interfaces nativas oferecidas pelos navegadores modernos que permite interações avançadas com o sistema, dispositivos e navegador de forma segura e controlada.

API significa Application Programming Interface — em português, Interface de Programação de Aplicações. Em termos simples, uma API é um conjunto de regras e funcionalidades que permite que diferentes softwares se comuniquem entre si.

Ela inclui recursos como:

• 📋 Clipboard API — copiar e colar conteúdos

• 📷 MediaDevices API — acessar câmera e microfone

• 🗂️ Fetch API — fazer requisições HTTP assíncronas

• 💾 LocalStorage e IndexedDB — armazenar dados no navegador

• 🔔 Notification API — enviar notificações push

Essas APIs tornam possível criar aplicações web cada vez mais interativas e completas, sem depender de plugins externos.

Clipboard API

A Clipboard API do JavaScript é uma interface moderna e segura que permite aos sites ler e escrever diretamente na área de transferência do usuário — ou seja, copiar e colar dados — com consentimento e sob certas restrições.

 O que a Clipboard API permite?

📋 1. Copiar texto

Usa navigator.clipboard.writeText()

navigator.clipboard.writeText('Olá, mundo!')
  .then(() => console.log('Texto copiado!'))
  .catch(err => console.error('Erro ao copiar:', err));

📥 2. Colar texto

Usa navigator.clipboard.readText()

navigator.clipboard.readText()
  .then(texto => console.log('Texto colado:', texto))
  .catch(err => console.error('Erro ao colar:', err));

Requisitos de segurança

Por motivos de segurança e privacidade:

• 📍 A API só funciona em conexões seguras (HTTPS).

• 👆 Requer interação do usuário (ex: clique em botão) para colar.

• ⚠️ Alguns navegadores podem pedir permissão do usuário para leitura.

Dicas de uso

• Sempre envolva o acesso à área de transferência em eventos do usuário (como onclick).

• Use try/catch ou .catch() para lidar com erros.

• Mostre feedback visual ao usuário (ex. “Copiado!”).

Como Copiar para a Área de Transferência

Aqui vai um exemplo prático e super útil da dica sobre copiar para a área de transferência com JavaScript: um botão “Copiar Código” para usar em blogs, documentações ou tutoriais.

<pre id="codigo">
console.log("Olá, mundo!");
</pre>

<button onclick="copiarCodigo()">Copiar Código</button>

<script>
  function copiarCodigo() {
    const texto = document.getElementById('codigo').innerText;
    navigator.clipboard.writeText(texto)
      .then(() => alert('Código copiado com sucesso!'))
      .catch(() => alert('Erro ao copiar!'));
  }
</script>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

Como funciona:

• O <pre> contém o código a ser copiado.

• Ao clicar no botão, o conteúdo é lido com .innerText e copiado com navigator.clipboard.writeText(...).

• Se o texto (código) foi copiado corretamente, um alerta confirma a ação.

• Para testar, cole (CTRL + v) o texto copiado no bloco de notas do Windows.

Copiar e Colar com JavaScript

Neste exemplo você poderá copiar o texto para a área de transferência e colar no campo "textarea" do HTML.

<pre id="codigo">
const texto= "olá, mundo";
console.log(texto);
</pre>

<button onclick="copiarCodigo()">Copiar</button>
<button onclick="colarCodigo()">Colar</button>

<br/><br/>

<textarea id="saida" rows="4" cols="40" placeholder="Clique em 'Colar'..."></textarea>

<script>
  function copiarCodigo() {
    const texto = document.getElementById('codigo').innerText;
    navigator.clipboard.writeText(texto)
      .then(() => alert('Código copiado!'))
      .catch(err => alert('Erro ao copiar: ' + err));
  }

  function colarCodigo() {
    navigator.clipboard.readText()
      .then(texto => {
        document.getElementById('saida').value = texto;
      })
      .catch(err => alert('Erro ao colar: ' + err));
  }
</script>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

Observações:

• Para a função de colar funcionar, o navegador precisa de permissão explícita (ex: o usuário precisa interagir com a página).

• Esse código funciona apenas em contextos seguros (HTTPS).

• Navegadores modernos como Chrome, Edge e Firefox já suportam bem a API clipboard.

Exemplos práticos de uso da API de copiar e colar com JavaScript

Exemplo copiar com JavaScript: 

Exemplo de botão "Copiar Código" transformado em um componente HTML responsivo e estilizado com CSS. Ele é ideal para blogs, tutoriais e páginas de documentação técnica.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Copiar Código</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background-color: #f8f9fa;
      padding: 2rem;
    }

    .code-box {
      position: relative;
      background-color: #2d2d2d;
      color: #f8f8f2;
      border-radius: 8px;
      padding: 1rem;
      margin-bottom: 1rem;
      overflow-x: auto;
      font-family: monospace;
    }

    .code-box pre {
      margin: 0;
      white-space: pre-wrap; /* quebra de linha responsiva */
      word-break: break-word;
    }

    .copy-button {
      position: absolute;
      top: 10px;
      right: 10px;
      background-color: #4caf50;
      color: white;
      border: none;
      padding: 6px 12px;
      font-size: 0.9rem;
      border-radius: 4px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .copy-button:hover {
      background-color: #388e3c;
    }

    @media (max-width: 600px) {
      .copy-button {
        top: auto;
        bottom: 10px;
        right: 10px;
      }
    }
  </style>
</head>
<body>

  <div class="code-box">
    <pre id="codigo">
console.log("Olá, mundo!");
    </pre>
    <button class="copy-button" onclick="copiarCodigo()">Copiar</button>
  </div>

  <script>
    function copiarCodigo() {
      const texto = document.getElementById('codigo').innerText;
      navigator.clipboard.writeText(texto)
        .then(() => alert('Código copiado com sucesso!'))
        .catch(() => alert('Erro ao copiar o código!'));
    }
  </script>

</body>
</html>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

Características

• ✅ Totalmente responsivo (ajusta-se em celulares e tablets)

• ✅ Estilo limpo e moderno com destaque para o botão

• ✅ Ideal para posts técnicos, guias e documentações

• ✅ Fácil de reutilizar: basta copiar o bloco .code-box

Exemplo copiar e colar com JavaScript: 

<h3>Endereço de Entrega</h3>
<input id="entrega-nome" placeholder="Nome"><br>
<input id="entrega-rua" placeholder="Rua"><br>
<input id="entrega-cidade" placeholder="Cidade"><br><br>

<button onclick="copiarEndereco()">Usar mesmo endereço de entrega</button><br><br>

<h3>Endereço de Cobrança</h3>
<input id="cobranca-nome" placeholder="Nome"><br>
<input id="cobranca-rua" placeholder="Rua"><br>
<input id="cobranca-cidade" placeholder="Cidade"><br>

<script>
  function copiarEndereco() {
    // Pega os valores do endereço de entrega
    const nome = document.getElementById('entrega-nome').value;
    const rua = document.getElementById('entrega-rua').value;
    const cidade = document.getElementById('entrega-cidade').value;

    // Cola nos campos de cobrança
    document.getElementById('cobranca-nome').value = nome;
    document.getElementById('cobranca-rua').value = rua;
    document.getElementById('cobranca-cidade').value = cidade;
  }
</script>

Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.

Características

• Melhora a usabilidade do formulário.

• Evita retrabalho do usuário.

• Funciona 100% com JavaScript sem depender da API do navegador (sem clipboard permission).

• Você pode facilmente adaptar para colar de um banco de dados, localStorage, etc.

REFERÊNCIA JAVASCRIPT

1. [Clipboard: writeText() method] >> Método Clipboard: writeText() - MDN Web Docs.

2. [Clipboard: readText() method] >> Médodo Clipboard: readText()  - MDN Web Docs.

3. [Clipboard API] » Clipboard API - MDN Web Docs.