Como copiar texto para área de transferência usando o Zero Clipboard

Neste artigo vou ensinar a copiar um texto para a área de transferência (clipboard) usando javascript com o Zero Clipboard. Assim sendo, é possivel copiar o texto da sua página e depois colar em outro programa.

Aviso: No Internet Explorer esse script só funcionará na versão 9 pra cima. Você pode tentar catar a versão 2.0.2 do Zero Clipboard na internet, mas a maneira de utilizar é diferente da explicada aqui.

Primeiro baixe o Zero Clipboard clicando aqui.

Vai ter um monte de coisa no zip mas o que nos interessa é o que está na past dist do zip. Copie ZeroClipboard.min.js e ZeroClipboard.swf para a pasta javascript da sua página.

O nosso código vai ficar assim:

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<title>Teste Zero Clipboard</title>
		<meta charset="utf-8">
		<script src="js/ZeroClipboard.min.js"></script>
	</head>
	<body>
		
		<div id="texto">Este texto será copiado para o clipboard</div>

		<button id="botao-copiar" data-clipboard-target="texto">Copiar</button>
		
	</body>
</html>

Criamos um div com o id texto e colocamos a frase que será copiada dentro dele.

Fizemos também um botão com o id botao-copiar e o atributo data-clipboard-target apontando para o id texto do div. Isso diz para o script que ele deverá copiar o texto do div quando o botão for clicado.

Agora vamos criar uma tag script no finalzinho da nossa tag body, ainda dentro dela.

<script>
var client = new ZeroClipboard();

client.clip(document.getElementById("botao-copiar"));

client.on("aftercopy", function(){
	alert("Copiado!");
});
</script>

Primeiro criamos um objeto ZeroClipboard e atribuímos ele à variável client.

Depois usamos o método clip pra colocar o swf em cima do botão, para que quando clicado ele chame uma função do flash pra copiar o texto.

Por último colocamos uma escuta para o evento aftercopy, ou seja, quando a cópia for feita a função passada será executada. A função simplesmente exibe um alerta dizendo que o texto foi copiado.

Não esqueça de comentar, dúvidas e sugestões são bem-vindas!