Qual melhor código para copiar para área de transferência que funcione em todos os navegadores?
-
31)Maneira cross-browser de copiar texto para a Área de Transferência Clipboard, 2)[Como copiar para área de transferência sem usar flash?] (pt.stackoverflow.com/q/81098/91), 3) Como posso copiar uma imagem para a área de transferência Clipboard?, 4) Como pego o que está copiado na área de transferência e coloco em uma variável?, 5) outras– rrayCommented 26/09/2015 às 1:08
-
Poderia considerar minha resposta?– Rodrigo VieiraCommented 26/09/2015 às 3:42
-
Não entendi? se resolveu o problema claro que a resposta é valida.– rrayCommented 26/09/2015 às 11:29
Adicione um comentário
|
1 Resposta
1ª Opção - Função com argumento
Essa função é uma gambiarra que recebe um valor e automaticamente copia para a área de transferência. Caso seu navegador não suporte o tratamento de erro chama uma função secundária.
function copyTextToClipboard(text) {
var textArea = document.createElement("textarea");
textArea.style.position = 'fixed';
textArea.style.top = 0;
textArea.style.left = 0;
textArea.style.width = '2em';
textArea.style.height = '2em';
textArea.style.padding = 0;
textArea.style.border = 'none';
textArea.style.outline = 'none';
textArea.style.boxShadow = 'none';
textArea.style.background = 'transparent';
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
window.prompt("Copie para área de transferência: Ctrl+C e tecle Enter", text);
}
document.body.removeChild(textArea);
}
// Teste
var copyTest = document.querySelector('.copyTest');
copyTest.addEventListener('click', function(event) {
copyTextToClipboard('Teste');
});
<p>
<button class="copyTest">Copiar "Teste"</button>
</p>
<p>
<input type="text" placeholder="Cole aqui">
</p>
Funciona nos seguintes navegadores: Chrome 43+, Firefox 41+, Internet Explorer 10+ e Opera 29+
Notas:
- Você pode detectar se o navegador suporta esse código utilizando:
var copySupported = document.queryCommandSupported('copy');
- Todo
document.execCommand('copy')
só é chamado se o usuário efetuar alguma ação direta, como um evento onClick por exemplo. Isso é feito para evitar que dados sejam copiados para a área de transferência sem a intenção do usuário.
2ª Opção - Cópia manual via Prompt
Nessa opção é aberto um prompt com o valor já selecionado e o usuário manualmente copia o código. A vantagem é que funciona em todos os navegadores.
function copyToClipboard(text) {
window.prompt("Copie para área de transferência: Ctrl+C e tecle Enter", text);
}