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!