Essa é uma dica bem rápida de como podemos mandar algo com o clipboard, ou seja, o equivalente a dar um CTRL + C em um texto na sua página.
Para fazer este exemplo, vamos usar o jQuery por que escrevemos pouquíssimas linhas de código. Então temos uma página bem simples, apenas com algumas tags, e vamos criar um input type text com um ID url e um value:
<html>
<head>
<title>Copy to Clipboard</title>
<style>
#url{
text-align: center;
padding: 40px;
}
</style>
</head>
<body>
<input type="text" id="url" value="https://devpleno.com" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
</body>
</html>Com isso teremos o input, e a ideia é que quando clicarmos nele. já ser copiado para a área de transferência, apenas precisando dar CTRL + V para funcionar.
Lembrando que já importamos o jQuery da CDN. Vamos então abrir no body um novo Script. Nele, quando clicar na URL, quero que selecione e depois execute o comando copy.
<script>
$("url").click(function(){
$(this).select();
document.execCommand('copy');
})
</script>Algumas pessoas colocam um Botão para copiar e deixam apenas o select quando clicarmos no texto. Isso é muito útil quando temos URL’s para compartilhar e é legal para deixar essa facilidade na experiência do usuário quando ele estiver utilizando o seu sistema.
Um exemplo de onde isso é muito útil é na URL do github, pois poupamos a tarefa de copiar do usuário. Confira a explicação em vídeo para entender melhor.
Deixe suas dúvidas e sugestões nos comentários. Curta o DevPleno no Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!
Mestre em Sistemas de Informação pela USP e criador do DevPleno. Iniciou sua carreira como professor com apenas 18 anos em um curso técnico, foram 11 anos em sala de aula formando desenvolvedores fullstack no sul de Minas Gerais.