Pode utilizar o clipboardJS, este não possui dependências e não requer tecnologia Flash.
O único problema é o suporte, de acordo com o README são utilizadas as APIs selection
e document#execCommand
e os navegadores que suportam são:
- Firefox 41+
- Chrome 42+
- Internet Explorer 9+
- Opera 29+
básico:
Nesse exemplo é copiado o que estiver definido no atributo data-text:
new Clipboard('button');
<script src="https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
<button data-text='The quick brown fox jumps over the lazy dog.'>
copiar
</button>
copiando texto de outro elemento:
Nesse exemplo, será copiado o que estiver escrito no input de texto.
new Clipboard('button');
<script src="https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
<input id='id-do-input' type='text' placeholder='Texto que será copiado...'/>
<button data-target='id-do-input'>copiar</button>
eventos:
Você pode obter as informações de sucesso ou falha ao tentar copiar algo para a área de transferência. Ative o console (ctrlshiftk) para visualizar o output quando clicar no botão do snippet a seguir:
var clip = new Clipboard('button');
clip.on('success', function(e) {
console.info('Ação:', e.action);
console.info('Conteúdo copiado:', e.text);
console.info('Trigger:', e.trigger); // no caso de "copiar de outro elemento"
e.clearSelection();
});
clip.on('error', function(e) {
console.error('Ação:', e.action);
console.error('Trigger:', e.trigger);
});
<script src="https://raw.githubusercontent.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
<button data-text='Testando eventos'>copiar</button>