Copiar textos para a área de transferência é muito útil para compartilhamento de dados. Numa página web, por exemplo, podemos adicionar botões de compartilharmento para que os usuários compartilhem nosso conteúdo em suas redes sociais. Nesse caso precisamos fazer com que os dados estejam na área de transferência logo após o usuário clicar em um botão. Isso facilita o compartilhamento de dados, pois os usuários só precisam colar os dados.
Em caso de aplicativos mobile, desenvolvidos com HTML, CSS e JavaScript, pode também ser necessário a cópia automática de informações para o clipboard (área de transferência), principalmente quando a seleção de texto não está habilitada.
O processo para copiar dados para o clipboard é muito simples. Primeiro precisamos de um campo com o conteúdo a ser adicionado. Para isso vamos criar um textarea e colocá-lo na página.
function copiarParaClipboard(texto) {
var textarea = document.createElement("textarea");
}Agora vamos adicionar dentro do textarea o conteúdo a ser selecionado para a cópia automática.
function copiarParaClipboard(texto) {
var textarea = document.createElement("textarea");
textarea.value = texto;
}Para que possamos executar o comando “copy” precisamos que esse textarea esteja dentro do corpo da página, entre as tags <body></body>. Então vamos adicioná-lo a página.
function copiarParaClipboard(texto) {
var textarea = document.createElement("textarea");
textarea.value = texto;
document.body.appendChild(textarea);
}Não queremos estragar o layout da nossa página com esse textarea, então vamos modificar algumas propriedades do elemento para que ele fique quase oculto na página.
function copiarParaClipboard(texto) {
var textarea = document.createElement("textarea");
textarea.value = texto;
textarea.style.width = '1px';
textarea.style.height = '1px';
document.body.appendChild(textarea);
}Agora que já temos o textarea na página com os dados a serem copiados, vamos então selecionar o texto do textarea e executar o comando “copy” para copiarmos esse texto para a área de transferência. Depois que o texto for copiado nós não precisamos mais do textarea, então vamos removê-lo da página.
function copiarParaClipboard(texto) {
var textarea = document.createElement("textarea");
textarea.value = texto;
textarea.style.width = '1px';
textarea.style.height = '1px';
document.body.appendChild(textarea);
textarea.select();
if (document.execCommand('copy')) {
textarea.remove();
}
}A nossa função está pronta! É hora de testá-la! Abaixo segue uma página que você pode estar salvando para testar a função acima.
<!doctype html>
<head>
<title>Copiando dados para o clipboard</title>
<script>
function copiar() {
copiarParaClipboard('Esse texto será copiado.');
console.log('copiado com sucesso');
}
function copiarParaClipboard(texto) {
var textarea = document.createElement("textarea");
textarea.value = texto;
textarea.style.width = '1px';
textarea.style.height = '1px';
document.body.appendChild(textarea);
textarea.select();
if (document.execCommand('copy')) {
textarea.remove();
}
}
</script>
</head>
<body>
<button id="copiar" onclick="javascript: copiar()">Copiar</button>
</body>
</html>Podemos usar essa função para ajudarmos nossos visitantes a copiarem textos longos em nosso site com um único clique.
