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

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

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');
  
});

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