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');
});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
Ta dando este erro “script.js:26 Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)”
Tem algo errado no seu código…
Show, como faço um botão para colar autmático, ou quando clicar colar automático?
Opa Bruno, é só procurar sobre o evento de paste
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’);
});
O navegador pede uma autorização para acessar sua área de transferência e depois permite