Copiar conteúdo para Clipboard utilizando apenas Javascript

Como copiar um conteúdo para Clipboard utilizando apenas

A abordagem a seguir funciona no , Firefox, Internet Explorer e Edge e em versões recentes do Safari (o suporte de cópia foi adicionado na versão 10, lançada em outubro de 2016).

Crie uma área de texto e defina seu conteúdo para o texto que você deseja copiar para a área de transferência.
Anexe a área de texto ao DOM.
Selecione o texto na área de texto.
Chame document.execCommand(“copy”)
Remova a área de texto do dom.
Nota: você não verá a área de texto, pois ela é adicionada e removida na mesma invocação síncrona do código Javascript.

Algumas coisas a serem observadas se você estiver implementando isso sozinho:

Por motivos de , isso só pode ser chamado de um manipulador de eventos, como click (assim como com a abertura de janelas).
O Internet Explorer mostrará uma caixa de diálogo de permissão na primeira vez que a área de transferência for atualizada.
O Internet Explorer e o Edge rolarão quando a área de texto estiver focada.
execCommand() pode lançar em alguns casos.
Novas linhas e guias podem ser engolidas, a menos que você use uma área de texto. (A maioria dos artigos parece recomendar o uso de um div)
A área de texto ficará visível enquanto a caixa de diálogo do Internet Explorer for exibida, você precisa ocultá-la ou usar a API de dados da área de transferência específica do Internet Explorer.
No Internet Explorer, os administradores de sistema podem desabilitar a API da área de transferência.
A função abaixo deve lidar com todos os problemas a seguir da maneira mais limpa possível. Por favor, deixe um comentário se você encontrar algum problema ou tiver alguma sugestão para melhorá-lo.

function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return window.clipboardData.setData("Text", text);

    }
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return prompt("Copy to clipboard: Ctrl+C, Enter", text);
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *