Criando botão de copiar com JS

Walter Nascimento
Walter Nascimento | PT-BR
2 min readOct 15, 2020

Criando funcionalidade de copiar com JavaScript

[click here for English]

É bastante comum precisarmos copiar algo na tela, seja para pesquisar posteriormente ou somente para guardar em algum lugar, e com isso, vamos criar uma função rápida para copiar texto com JavaScript.

Código

Primeiro vamos criar a interface, faremos algo simples, utilizando apenas HTML.

Código em HTML

Na estrutura em HTML foi criado um input que será o texto a ser copiado, e temos dois botões, que será usado para demonstrar duas formas de copiar texto com JavaScript.

Código em JS — function changeText

No primeiro tipo adicionamos um evento ao botão com id execCopy que chama uma função de mesmo nome, nesta função primeiro selecionamos o texto, e posteriormente usamos a função execCommand("copy"); essa é uma função nativa que executa o comando de copia.

No segundo tipo adicionamos um evento ao botão com id clipboardCopy que chama uma função de mesmo nome, nesta função primeiro recuperamos o valor do input e depois passamos para a função de clipboard , um detalhe nesta função é que para funcionar corretamente é necessário usar o async e o await, ou usar o then() , pois ele é uma promisse.

pronto simples assim.

Demo

Veja abaixo o projeto completo funcionando.

Projeto no codepen

Youtube

Se preferi assistir, vejo o desenvolvimento no youtube.

Vídeo no youtube

Obrigado por ler!

Se você tiver alguma dúvida, reclamação ou dica, pode deixar aqui nos comentários. Vou ter o maior prazer em responder!

😊😊 Até mais! 😊😊

--

--