Em alguns sites, parte do conteúdo é copiada para a área de transferência sem a necessidade de usar o atalho ctrl+c ou atrás dos menus do navegador.

Confesso que existe certa raridade em sites assim, e também onde se faz necessário seu uso. Um exemplo de uso seria oferecer uma informação para o usuário, como um link, e que certamente ele copiará o endereço para outra aplicação.

Em meu blog trato somente do que conheço, ou seja, design de sites, e um pouco de programação que uso para complementar o trabalho (JS e PHP). Não penso em comentar sobre Flash, mas neste artigo se fará necessário, visto que o JS sozinho não possui capacidade para executar tal operação.

Bom, onward …

A parte do flash é extremamente simples. Abra um arquivo novo, comum, e sem alterar nada no palco, clique no primeiro frame na timeline e aperte F9 para abrir o painel de Ações. Agora insira o código abaixo:

Não vou me aprofundar no assunto, o Action Script acima só copia um valor para a Área de Transferência.

Salve e publique o arquivo do Flash. Só iremos precisar do swf, que no meu exemplo chamarei de _clipboard.swf.

Agora vamos criar um novo documento HTML com um estrutura básica de teste.

Nada de novo no arquivo. O input é o local onde será feito o click para copiar o texto. O textarea eu coloquei para testar o conteúdo copiado.

Agora a parte interessante. Usando o javascript iremos inserir o flash no documento para que o texto seja copiado. Usarei createElement e innerHTML.

A primeira função, chamada de $(), é na verdade um alias para o document.getElementById, somente isso.

A segunda função que faz a inclusão. Nada de complexo aqui também. Em nível intermediário de JS, qualquer pessoa entende o código.

Nas primeiras linhas tenho 2 variáveis que armazenam o arquivo em flash para incluir, e um id para a div que será criada. Depois faço um teste com uma estrutura de controle (if), para verificar se a div não existe. Se não existir, uma nova é criada usando createElement, recebe o id, e depois é adicionada ao documento com appendChild.

Logo abaixo uso innerHTML com um valor “vazio” para remover o que está dentro da div (no caso de clicar novamente no elemento de copiar), e seto uma variável com a tag embed que inclui o flash na página. Nada de estupendo aqui também, só uma tag comum HTML e concatenação de strings para passar o valor do input para o flash através de FlashVars. Depois o valor da variável é inserido na div com o innerHTML também.

É só isso. As outras linhas servem para informar ao usuário que o conteúdo foi copiado (o alert), e seleciona o texto do input. A seleção é para navegadores antigos, onde o script pode não funcionar corretamente, e pelo menos o usuário já possui o texto selecionado. No IE 5.5, o select() tem um bug, que pode atrasar na seleção. Caso isso ocorra com frequência, use um setTimeout com um valor pequeno (em torno de 30~50 milisegundos).

Bom, sem mais delongas. É copiar o JS para o HEAD da página (não esqueça da tag script), ou salvar em um arquivo separado e usar um import.

Até a próxima.

Beta-tester: Paulo A. G. Rodrigues

Testei no IE7, IE6, FF2 e Opera9. Funcionou em todos menos no IE7 aqui. Já o Paulo testou no IE7 e diz que funcionou. E de fato venho apresentando problemas com o IE7, talvez algum vírus ou malware. Se você testou não deixe de comentar.