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
React Native - Armazenamento e Sincronia com Firebase Firestore
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 - Trabalhando com web workers
Conhecer o curso
