Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Copiar texto para o clipboard com zeroclipboard jQuery

06-05-2015 11:03

Nesse post vou mostrar como copiar um texto para o clipboard usando o zeroclipboard jQuery.
Você vai precisar baixar um arquivo chamado ZeroClipboard.js nesse link https://github.com/zeroclipboard/zeroclipboard
Coloca esse arquivo no mesmo diretório de onde vai rodar o exemplo.

Em seguida, é só rodar o exemplo abaixo

<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">Copy To Clipboard</div> <div class="clip_button">Copy This Too!</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>

Para ver a documentação completa do zeroclipboard, acesse esse link https://github.com/zeroclipboard/zerocl ... uctions.md
3
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:
 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17385
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Copiar texto para o clipboard com zeroclipboard jQuery

06-05-2015 11:32

Para quem quer copiar o texto de um textarea para o clipboard baseado no exemplo acima deve fazer o seguinte:

Adicione um textarea no documento, por exemplo:

<textarea class="copiado"></textarea>

Observe a class copiado

Troque o seguinte bloco

client.on( 'copy', function(event) { event.clipboardData.setData('text/plain', event.target.innerHTML); } );

Por

client.on( 'copy', function(event) { event.clipboardData.setData('text/plain', $('.copiado').val()); } );

Para adicionar uma mensagem informando que o texto foi copiado para o clipboard, adicione a seguinte div no seu HTML:

<div class="texto_copiado" style="display:none;">texto copiado</div>

Substitua o bloco do client.on para esse bloco

client.on( 'copy', function(event) { $('.texto_copiado').hide(); event.clipboardData.setData('text/plain', $('.copiado').val()); $('.texto_copiado').fadeIn(); });

1
Tem um script legal em HTML, CSS, PHP, HTML, JavaScript, jQuery? Poste e compartilhe com os usuários do fórum :rock:

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado