clipboard.js - Copiar e Colar com JavaScript

Olá, Web Developers!

Há momentos em que precisamos permitir que o usuário copie algo para a sua área de transferência (clipboard). Porém, isso pode ser complicado em alguns momentos, seja por APIs antigas ou implementação específica de algum navegador.

Um modo que era bastante usado tratava-se de criar um elemento em flash escondido na página. Isso permitia enviar os dados para a área de transferência do usuário, mas flash não é uma opção hoje em dia e alguns navegadores até o deixa desabilitado por padrão, como é o caso do Chrome.

Para facilitar essa tarefa de modo simples e com um código bem leve (3kb) veio ao mundo o clipboard.js. Ele usa a Clipboard API do HTML5 e foi criado pelo brasileiro Zeno Rocha.

Curso JavaScript Básico

Conhecer o curso

Instalação

Você pode baixar o clipboard.js com o seguinte comando:

npm install clipboard --save

Ou faça download do arquivo js pelo site https://clipboardjs.com/.

Após incluir a biblioteca à sua página, instancie passando um seletor DOM, elemento HTML ou lista de elementos HTML.

new Clipboard('.btn');

Como usar?

Fazer a ação de um elemento copiar o conteúdo de outro elemento é um caso de uso bastante comum.

Na imagem abaixo temos um exemplo: um botão que faz com que o conteúdo de um input seja copiado.

Para fazer isso funcionar, teríamos um HTML assim:

<!-- Target -->
<input id="input1" value="https://treinaweb.com.br">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#input1">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

Quando iniciamos a biblioteca, passamos a classe .btn. Isso fará com que as funções da biblioteca entrem em ação sempre que clicarmos em um elemento com a classe “btn”.

Veja que no nosso HTML temos um botão com essa classe. Mas como indicar para a biblioteca qual elemento possui o conteúdo que esse botão deve pegar e enviar para a área de transferência? Para isso a biblioteca usa atributos. Veja que no botão indicamos com o atributo data-clipboard-target o ID do nosso input.

Dessa maneira podemos ter vários botões com a classe “.btn”, e eles serão responsáveis por disparar a ação da biblioteca. Em cada botão a gente pode passar o id de um input. Veja que após iniciar a biblioteca a gente não precisou de mais nenhuma linha de JavaScript!

O comportamento padrão é o de copiar o texto. Caso você passe para o botão o atributo data-clipboar-action com o valor "cut", a ação de recortar será executada.

Também há a possibilidade de se ouvir eventos a partir do objeto clipboard que instanciamos lá no começo, além de outras funcionalidades mais avançadas.

Suporte

O clipboard.js funciona nos seguintes navegadores:

• Chrome (42+)
• Edge (12+)
• Firefox (41+)
• IE (9+)
• Opera (29+)
• Safari (10+)

Até a próxima!

Curso JavaScript Avançado

Conhecer o curso