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

Cron do Magento 2 não roda: status missed e pending no cron_schedule

Pedido que não fatura e e-mail que não sai porque todo job fica missed: como ler a cron_schedule, conferir o…

12 horas atrás

Gerar slug de URL em PHP: acento, espaço e símbolo fora do endereço

Uma função curta em PHP 8.3 que transforma Camiseta Preta Tamanho GG em camiseta-preta-tamanho-gg, sem depender do locale do servidor.

1 dia atrás

Log de consentimento LGPD: a tabela MySQL que guarda a prova do aceite

O banner registra o clique só no navegador e some. Veja a tabela MySQL e o endpoint que gravam a…

2 dias atrás

Comando CLI Magento 2: criar a classe e registrar no di.xml

A classe do comando existe e o bin/magento list ignora ela. Falta o registro no di.xml: aqui vai a classe…

3 dias atrás

Traduzir o pt_BR.csv do Magento 2 em lote sem perder a coluna de origem

Como traduzir duas mil linhas do pt_BR.csv do Magento 2 lendo com fgetcsv e regravando com fputcsv, sem encostar na…

3 dias atrás

Variação não está disponível no WooCommerce: limpar transients e lookup

Produto variável respondendo "Desculpe, este produto não está disponível" mesmo com a variação ativa: limpe os transients do WooCommerce e…

4 dias atrás