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

CNPJ alfanumérico Magento 2: módulo grátis com máscara e validação

Módulo gratuito Roger_CnpjAlfanumerico que aplica máscara e validação do novo CNPJ alfanumérico no checkout e formulários do Magento 2 e…

4 dias atrás

CNPJ alfanumérico no WooCommerce: plugin grátis de máscara e validação

A partir de 06/07/2026 a Receita passa a emitir CNPJ alfanumérico. Conheça o plugin grátis que aplica máscara e validação…

4 dias atrás

Como remover um modulo do Magento 2

Para remover um módulo do Magento 2, siga os passos abaixo: 1. Desabilitar o módulo Primeiro, desabilite o módulo usando…

1 ano atrás

Criar um memorando de crédito (cancelar) invoice no Magento 2

Para cancelar 100% do pedido e criar um crédito para todos os itens através da API REST do Magento 2,…

2 anos atrás

Consultando no banco quantidade disponivel para Venda (estoque)

No Magento 2, a quantidade "reservada" na "Salable Quantity" é gerenciada principalmente pelos módulos MSI (Multi-Source Inventory). A "Salable Quantity"…

2 anos atrás

Admin do Magento 2 não acessa

Como corrigir o erro ao acessar o Admin do Magento 2. Mesmo após fazer o login, permanece na tela de…

2 anos atrás