JavaScript

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

19 de julho de 2020

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!

como copiar textos para area de transferencia javascript capa

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

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

Subscribe
Notify of
guest
5 Comentários
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Unknown

Ta dando este erro “script.js:26 Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)”

Battisti

Tem algo errado no seu código…

Bruno

Show, como faço um botão para colar autmático, ou quando clicar colar automático?

Battisti

Opa Bruno, é só procurar sobre o evento de paste

Bruno

Vlw, eu dei uma pesquisada, mas parece que os navegadores tem uma proteção para não funcionar o colar com um click ou automático, eu copei, digitei manualmente para aprender o código mas ele funciona até uma parte e não cola, talvez seja essa proteção de segurança no chrome. Esse é o código.

Sou iniciante com JS e estou arrancando o cabelo já, pq não entendo o que está acontecendo.

HTML

<textarea class=”cl”>Campo para colar</textarea>
<button id=”colar”>Colar</button>

JS

let btn = document.querySelector(‘#colar’);
btn.addEventListener(‘click’, function(e) {
 let textArea = document.querySelector(‘.cl’);
 textArea.select();
 document.execCommand(‘paste’);
});

5
0
Would love your thoughts, please comment.x