Linguagens de Programação

Copiar conteúdo para Clipboard utilizando apenas Javascript

Como copiar um conteúdo para Clipboard utilizando apenas Javascript

A abordagem a seguir funciona no Chrome, 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 segurança, 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);
        }
    }
}

Post Recentes

Bloquear .env e .git no nginx: as regras que ainda deixam o arquivo vazar

Negar /.env no nginx parece resolvido até alguém pedir /wp-content/uploads/.env ou backup.sql. As regras que testei e os furos que…

12 horas atrás

Canonical errado no Yoast: corrigindo pelo filtro wpseo_canonical

O Search Console marca suas páginas 2, 3 e 4 como alternativas da página 1? Ajuste a tag canônica do…

16 horas atrás

Layout XML do Magento 2: remover bloco de módulo de terceiro

Um módulo de terceiro plantou um banner no topo da loja e você não quer desinstalar nada: tire o bloco…

1 dia atrás

Restaurar dump do Magento 2 em outro servidor: trocar a base_url no SQL

Importou o banco de produção e o site pula para o domínio antigo? Rode o UPDATE em core_config_data, limpe o…

2 dias atrás

Criar exceção customizada em PHP: quando estender Exception compensa

Seu catch trata pedido inexistente e banco fora do ar do mesmo jeito. Veja como criar exceção customizada em PHP…

3 dias atrás

DataProvider Magento 2: form do admin abre com campos vazios ao editar

O form do admin salva mas abre em branco na edição: veja o getData() indexado pelo id da entidade e…

4 dias atrás