Veja como é simples utilizar o JavaScript para copiar valores para a área de transferência (clipboard) do seu usuário.
Por mais que copiar um texto da tela de um website seja tão simples quanto um CTRL+C ou selecionar o texto e clicar com o botão direito e copiar, hoje em dia algumas tecnologias como os dispositivos moveis tornam essa função um pouco menos prática. Tente você mesmo selecionar um trecho de texto e aposto que acontecerá de ter problemas pegando todos os dados ou dados a mais do que precisava.
Outra coisa que pode acontecer, e acontece para os clientes do meu sistema, é a quando uma tela com diversas interações dentro da tabela acaba causando problemas que desfazem a seleção. Mas vamos ao que interessa, você provavelmente precisa:
- Copiar um texto de um campo ou
- Copiar um texto de uma variável.
Ambos casos são bem parecidos, mas vou mostra-los separados para quebrar o código em pedaços pequenos.
Com copiar o valor de um campo para a área de transferência usando o JavaScript
Como você poderá ver, o códifo é simples e consiste em capturar o elemento, selecionar o texto e executar o comando de copiar o texto selecionado
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<input id="inputTest"/>
<button onclick="copiarTexto()">Copiar</button>
<script>
let copiarTexto = () =>{
//captura o elemento input
const inputTest = document.querySelector("#inputTest");
//seleciona todo o texto do elemento
inputTest.select();
//executa o comando copy
//aqui é feito o ato de copiar para a area de trabalho com base na seleção
document.execCommand('copy');
};
</script>
</body>
</html>
Com copiar de uma variável para a área de transferência usando o JavaScript
Este segundo caso tem um ar de gambiarra, então se você souber de um jeito melhor, por favor me avise para que eu possa atualizar o código. Precisaremos criar o elemento, imitar o comportamento anterior e remover o elemento.
Por sorte, o JavaScript processa tudo isso de uma forma tão rápida que o campo nunca é visível para o usuário. Por precaução, tente deixa-lo sempre no final do código ou em algum lugar onde ele não atrapalhe o fluxo. É importante que você não use type hidden ou display none, pois em ambos casos não será possível fazer a seleção de texto.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<button onclick="copiarTexto()">Copiar</button>
<script>
let copiarTexto = () => {
//O texto que será copiado
const texto = "Lorem Ipsum Dolor";
//Cria um elemento input (pode ser um textarea)
let inputTest = document.createElement("input");
inputTest.value = texto;
//Anexa o elemento ao body
document.body.appendChild(inputTest);
//seleciona todo o texto do elemento
inputTest.select();
//executa o comando copy
//aqui é feito o ato de copiar para a area de trabalho com base na seleção
document.execCommand('copy');
//remove o elemento
document.body.removeChild(inputTest);
};
</script>
</body>
</html>
Ai está. Espero que esses trechos de códigos tenham sido úteis. Caso você tenha sugestões ou melhorias, por favor deixe nos comentários.