Como copiar textos para a área de transferência com JavaScript (Clipboard)

Neste artigo você vai aprender como copiar textos para a área de transferência com JavaScript de uma maneira simples, para utilizar nos seus programas!

Fala programador(a), beleza? Bora aprender melhor como criar a função de copiar textos com o JavaScript!

Para resolver este problema vamos utilizar a função de execCommand com o parâmetro copy

Porém primeiramente vamos criar nossa estrutura de HTML:

<textarea class="text">Texto para copiar</textarea>
<button id="copy">Copiar</button>

No exemplo temos um textarea que é provavelmente de onde você vai copiar os textos e também um botão para ação

E agora vamos a lógica com JavaScript:

let btn = document.querySelector('#copy');

btn.addEventListener('click', function(e) {

  let textArea = document.querySelector('.text');
  textArea.select();
  document.execCommand('copy');
  
});

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Aqui selecionamos o elemento do botão e depois atrelamos um evento de click nele, para fazer a ação da cópia

Dentro do evento atribuímos a textarea para uma variável  realizamos a seleção e cópia do texto, por meio do método execComand com o parâmetro copy

Desta maneira o texto será copiado para a área de transferência e com um Ctrl + v ou colar do botão direito, podemos inserir o texto em qualquer lugar

Legal né? 😀

Recomendo também a leitura deste artigo, que fala sobre as vantagens de colocar uma função em uma variável na linguagem JavaScript

Conclusão

Neste artigo vimos como copiar textos para a área de transferência com JavaScript, o famoso Clipboard

A ideia é selecionar o texto que deve ser copiado pelo método select

E por fim realizar a cópia com o execCommand

O mais interessante é que todos estes recursos são nativos do JavaScript, de uma forma simples conseguimos copiar o texto um input!

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

A cópia não funcionou? Se liga nestes três pontos:

Antes de achar que o código está errado, esses são os tropeços mais comuns de quem copia e cola o exemplo

1. O script rodou antes do HTML existir

Se a tag <script> está lá no topo da página, o document.querySelector('#copy') devolve null e o addEventListener quebra na linha seguinte

Joga o script pro final do body e o problema some

2. Seletor trocado

Repare que o botão é pego pelo id (#copy) e a textarea pela classe (.text)

Se você mexeu no HTML e esqueceu de ajustar o JavaScript, o clique até acontece, mas nada vai parar na área de transferência

3. Cópia disparada sozinha

Amarre a cópia a um clique do usuário, exatamente como fizemos aqui

Código que tenta copiar sozinho assim que a página carrega é pedir pra ter dor de cabeça

Já me ferrei uma vez por causa disso haha

Avisando o usuário que o texto foi copiado:

Tem um detalhe de experiência que muda muito a percepção: quem clica não vê nada acontecer

O texto foi pra área de transferência, a tela continua igualzinha, e a pessoa fica na dúvida se funcionou

A saída mais simples é trocar o texto do próprio botão por um instante

let btn = document.querySelector('#copy')

btn.addEventListener('click', function(e) {

let textArea = document.querySelector('.text')
textArea.select()
document.execCommand('copy')

btn.textContent = 'Copiado!'

setTimeout(function() {
btn.textContent = 'Copiar'
}, 2000)

})

O setTimeout devolve o texto original do botão depois de dois segundos

São quatro linhas a mais pra uma sensação de "funcionou" MUITO melhor 🙂

E se o texto não estiver numa textarea?

Aqui vale uma parada rápida pra entender o porquê do exemplo usar textarea

O select() é um método de campo de formulário, ou seja, ele vive em input e textarea

Uma div ou um <p> não têm esse método, então o mesmo código não se aplica direto neles

O caminho mais simples é manter o conteúdo dentro de um campo mesmo, e se você não quer que o visitante edite o texto antes de copiar, é só marcar como somente leitura

<textarea class="text" readonly>Texto para copiar</textarea>
<button id="copy">Copiar</button>

O JavaScript continua exatamente o mesmo

E ninguém bagunça o conteúdo antes do clique 😀

Copiar e colar são problemas diferentes:

Uma parte de quem cai neste artigo está atrás do caminho contrário: pegar o que já está na área de transferência e jogar dentro de um campo

Vale separar bem as duas coisas

Copiar é a sua página ESCREVENDO na área de transferência, foi o que fizemos até aqui

Colar é a sua página lendo o que está guardado lá, e esse conteúdo pode ser qualquer coisa que a pessoa copiou antes, uma senha, um número de cartão, o que for

Não é à toa que os dois lados não são espelhados: escrever é tranquilo, ler é bem mais restrito

Se a sua necessidade é só entregar o botão de copiar, o exemplo deste artigo resolve

E pro usuário colar, o bom e velho Ctrl + V segue fazendo o trabalho sem uma linha de JavaScript

Beleza?