Como criar um botão Copiar texto (HTML / Javascript)

Por | Atualizado em 2016-06-26

Neste tutorial iremos explicar como criar um botão de copiar para o seu Website. Para isso, iremos utilizar a funcionalidade “zeroclipboard”.

O que é o Zeroclipboard?

O ZeroClipboard é um conjunto de livrarias que cria um filme em Flash sobreposto num botão, que permite a cópia dos dados para a área de transferência. Dessa forma, é possível superar as limitações que alguns navegadores colocam à área de transferência do Windows.

Demo:

Como instalar o Zeroclipboard?


Comece por fazer o download da livraria do zeroclipboard. Em seguida, faça o upload dos arquivos para os seus servidores (com especial atenção ao arquivo ZeroClipboard.js e ZeroClipBoard.swf) via FTP.

Caso tenha dúvidas em como fazer o upload dos arquivos, poderá consultar um exemplo no nosso artigo: consulte o nosso artigo, fazer upload de arquivos via FTP (usando o WordPress).

Agora, sempre que necessitar de utilizar o seu botão, basta utilizar o seguinte código:

Exemplo 1:

<html>
<body>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<div id="d_clip_button" style="border:1px solid black; padding:20px;">Copy To Clipboard</div>
<script language="JavaScript">
var clip = new ZeroClipboard.Client();
clip.setText( 'Copy me!' );
clip.glue( 'd_clip_button' );
</script>
</body>
</html>

Exemplo 2:

<html>
<head>
<style type="text/css">
.clip_button {
text-align: center;
border: 1px solid black;
background-color: #ccc;
margin: 10px;
padding: 10px;
}
.clip_button.zeroclipboard-is-hover { background-color: #eee; }
.clip_button.zeroclipboard-is-active { background-color: #aaa; }
</style>
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="ZeroClipboard.js"></script>
<div class="clip_button">Copiar</div>
<div class="clip_button">Copiar isto também...</div>
<script type="text/javascript">
var client = new ZeroClipboard( $('.clip_button') );
client.on( 'ready', function(event) {
// console.log( 'movie is loaded' );
client.on( 'copy', function(event) {
event.clipboardData.setData('text/plain', event.target.innerHTML);
} );
client.on( 'aftercopy', function(event) {
console.log('Copied text to clipboard: ' + event.data['text/plain']);
} );
} );
client.on( 'error', function(event) {
// console.log( 'ZeroClipboard error of type "' + event.name + '": ' + event.message );
ZeroClipboard.destroy();
} );
</script>
</body>
</html>

Não se esqueça de trocar o “ZeroClipboard.js”, pelo link onde hospedou o seu arquivo no código dos exemplos. Por exemplo: www.site.com/ZeroClipboard.js

Caso possua dúvidas, consulte toda a documentação zeroclipboard.

Deixe uma resposta

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