Área de transferência (Copiar e colar) com Javascript – dica rápida

Tempo de leitura 2 minutos

HTML 5 nos provê uma API que permite gerenciar a área de transferência de uma forma bem simples e prática, eu vou mostrar neste artigo como você pode adicionar o famoso “clique para copiar” no seu projeto.

Compatível com qualquer framework Javascript, incluindo Ionic e Quasar Framework.

Este artigo é o primeiro com foco em dicas rápidas, eu costumo postar regularmente artigos mais detalhados e longos. As dicas rápidas serão mais curtas para vocês aprederem algo o mais rápido possível.

Erik Figueiredo

Exemplo da feature:

See the Pen Área de transferência (Copiar e colar) com Javascript – dica rápida by Erik (@erikfig) on CodePen.light

A ideia é simples, ler e escrever na área de transferência usando APENAS Javascript e HTML.

A primeira vista pode parecer complicado, mas o recurso é bem simples e somente precisa da autorização do usuário na hora de ler o que está na área de transferência dele, o que ajuda a vitar uso indevido (imagina alguma senha ali).

Este primeiro comando escreve algo na área de transferência.

navigator.clipboard.writeText(text);

Tudo o que você tem que fazer é passar uma string ali na variável text e pronto, mais simples impossível.

Para ler o conteúdo da área de transferência também é simples, só precisamos lidar com um promise.

navigator.clipboard.readText().then((text)=> {
    alert('text');
});

O exemplo que criei antes (no Codepen e adicionado acima, neste artigo) é mais completo e mostro como lidar com a promise usando async e await, além disso eu usei um textarea para incrementar mais o exemplo, mas na maioria das vezes é bem mais simples.

Se você quiser saber mais sobre, existe um link MUITO legal falando mais sobre esse recurso, mas está em inglês.

https://whatwebcando.today/clipboard.html

É isso! Artigo rápido pra você, se gostou deste formato se inscreve na newslettr, assim sei que posso continuar escrevendo artigos assim.

Autor: Erik Figueiredo

Músico, gamer amador, tutor de programação, desenvolvedor freelancer full cycle, com foco em PHP (Laravel e CakePHP), Javascript (Front e Node.js), Dart (Front e Flutter) e infra.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *