Qual é a melhor maneira de copiar texto para a área de transferência? (multi-navegador)

Eu tentei:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

mas no Internet Explorer, ocorre um erro de sintaxe. No Firefox, diz unsafeWindow is not defined.

Um bom truque sem flash: como o Trello acessa a área de transferência do usuário?

Visão geral

Existem três APIs principais do navegador para copiar para a área de transferência:

1. API de área de transferência assíncrona [navigator.clipboard.writeText]
   • Parte com foco em texto disponível no Chrome 66 (março de 2018)
   • O acesso é assíncrono e usa promessas de JavaScript , pode ser gravado para que os prompts do usuário de segurança (se exibidos) não interrompam o JavaScript na página.
   • O texto pode ser copiado para a área de transferência diretamente de uma variável.
   • Suportado apenas em páginas veiculadas em HTTPS.
   • No Chrome 66, as páginas nas guias ativas podem gravar na área de transferência sem um prompt de permissão.
2. document.execCommand('copy')
   • A maioria dos navegadores é compatível com isso a partir de abril de 2015 (consulte Suporte ao navegador abaixo).
   • O acesso é síncrono, ou seja, interrompe o JavaScript na página até a conclusão, incluindo a exibição e a interação do usuário com qualquer solicitação de segurança.
   • O texto é lido do DOM e colocado na área de transferência.
   • Durante o teste ~ abril de 2015, apenas o Internet Explorer foi observado como exibindo prompts de permissões enquanto gravava na área de transferência.
3. Substituindo o evento de cópia
   • Consulte a documentação da API da área de transferência em Substituindo o evento de cópia .
   • Permite modificar o que aparece na área de transferência a partir de qualquer evento de cópia, podendo incluir outros formatos de dados que não sejam texto sem formatação.
   • Não abordado aqui, pois não responde diretamente à pergunta.

Notas gerais de desenvolvimento

Não espere que os comandos relacionados à área de transferência funcionem enquanto você estiver testando o código no console. Geralmente, é necessário que a página esteja ativa (API do Async Clipboard) ou requer interação do usuário (por exemplo, um clique do usuário) para permitir ( document.execCommand('copy')) acessar a área de transferência, veja abaixo para obter mais detalhes.

IMPORTANTE (observado aqui 2020/02/20)

Observe que, desde que esta postagem foi originalmente descontinuada por escrito, as permissões em IFRAMEs de origem cruzada e outros "sandboxing" de IFRAME impedem que as demos incorporadas "Execute o snippet de código" e o "codepen.io example" funcionem em alguns navegadores (incluindo Chrome e Microsoft Edge) )

Para desenvolver, crie sua própria página da web, sirva essa página pela conexão HTTPS para testar e desenvolver.

Aqui está uma página de teste / demonstração que demonstra o funcionamento do código: https://deanmarktaylor.github.io/clipboard-test/

Async + Fallback

Devido ao nível de suporte do navegador para a nova API do Async Clipboard, você provavelmente desejará recorrer ao document.execCommand('copy')método para obter uma boa cobertura do navegador.

Aqui está um exemplo simples (pode não funcionar incorporado neste site, leia a nota "importante" acima):

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

(o exemplo do codepen.io pode não funcionar, leia a observação "importante" acima). Observe que este snippet não está funcionando bem na visualização incorporada do Stack Overflow. Você pode experimentá-lo aqui: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011

API de área de transferência assíncrona

• Postagem do anúncio do Chrome 66 (março de 2018)
• Referência da documentação de rascunho da API da área de transferência assíncrona

Observe que existe a capacidade de "solicitar permissão" e testar o acesso à área de transferência por meio da API de permissões no Chrome 66.

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ('copy')

O restante deste post aborda as nuances e os detalhes da document.execCommand('copy')API.

Suporte do navegador

O document.execCommand('copy')suporte ao JavaScript aumentou, veja os links abaixo para atualizações do navegador:

• Internet Explorer 10+ (embora este documento indique algum suporte do Internet Explorer 5.5+).
• Google Chrome 43 ou superior (~ abril de 2015)
• Mozilla Firefox 41+ (entrega ~ setembro de 2015)
• Opera 29+ (baseado no Chromium 42, ~ abril de 2015)

Exemplo Simples

(pode não funcionar incorporado neste site, leia a nota "importante" acima)

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

Exemplo complexo: Copiar para a área de transferência sem exibir a entrada

O exemplo simples acima funciona muito bem se houver um elemento textareaou inputvisível na tela.

Em alguns casos, você pode querer copiar texto para a área de transferência sem exibir um elemento input/ textarea. Este é um exemplo de uma maneira de contornar isso (basicamente insira o elemento, copie para a área de transferência, remova o elemento):

Testado com Google Chrome 44, Firefox 42.0a1 e Internet Explorer 11.0.8600.17814.

(pode não funcionar incorporado neste site, leia a nota "importante" acima)

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a
  // flash, so some of these are just precautions. However in
  // Internet Explorer the element is visible whilst the popup
  // box asking the user for permission for the web page to
  // copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

Notas Adicionais

Funciona apenas se o usuário executar uma ação

Todas as document.execCommand('copy')chamadas devem ocorrer como resultado direto de uma ação do usuário, por exemplo, clique em manipulador de eventos. Esta é uma medida para evitar mexer com a área de transferência do usuário quando eles não a esperam.

Veja a postagem dos desenvolvedores do Google aqui para obter mais informações.

API da área de transferência

Observe que a especificação completa do rascunho da API da área de transferência pode ser encontrada aqui: https://w3c.github.io/clipboard-apis/

É suportado?

• document.queryCommandSupported('copy')deve retornar truese o comando "é suportado pelo navegador".
• e document.queryCommandEnabled('copy')retorne truese o document.execCommand('copy')for bem-sucedido se for chamado agora. Verificando para garantir que o comando foi chamado a partir de um encadeamento iniciado pelo usuário e outros requisitos sejam atendidos.

No entanto, como um exemplo de problemas de compatibilidade do navegador, o Google Chrome de ~ abril a ~ outubro de 2015 retornou apenas truede document.queryCommandSupported('copy')se o comando foi chamado a partir de um encadeamento iniciado pelo usuário.

Observe os detalhes de compatibilidade abaixo.

Detalhes de compatibilidade do navegador

Enquanto um simples chamada para document.execCommand('copy')envolto em um try/ catchbloco chamado como resultado de um clique do usuário irá obter o uso mais compatibilidade a seguinte tem algumas ressalvas:

Qualquer chamada para document.execCommand, document.queryCommandSupportedou document.queryCommandEnableddeve ser agrupada em um try/ catchbloco.

Diferentes implementações de navegador e versões de navegador lançam diferentes tipos de exceções quando chamadas em vez de retornar false.

Diferentes implementações de navegadores ainda estão em andamento e a API da área de transferência ainda está em rascunho. Lembre-se de fazer seus testes.

A cópia automática para a área de transferência pode ser perigosa; portanto, a maioria dos navegadores (exceto o IE) torna muito difícil. Pessoalmente, eu uso o seguinte truque simples:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

O usuário recebe a caixa de prompt, onde o texto a ser copiado já está selecionado. Agora basta pressionar Ctrl+ Ce Enter(para fechar a caixa) - e pronto!

Agora, a operação de cópia da área de transferência é SEGURA, porque o usuário faz isso manualmente (mas de maneira bastante direta). Obviamente, funciona em todos os navegadores.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>

A abordagem a seguir funciona no Chrome, Firefox, Internet Explorer e Edge e nas versões recentes do Safari (o suporte à 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ínio.

Nota: você não verá a área de texto, pois ela é adicionada e removida na mesma chamada síncrona do código Javascript.

Algumas coisas a observar se você estiver implementando isso sozinho:

• Por motivos de segurança, isso só pode ser chamado a partir de um manipulador de eventos, como clique (assim como na 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 ser lançado 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 uma div)
• A área de texto ficará visível enquanto a caixa de diálogo do Internet Explorer for exibida, você precisará ocultá-la ou usar a API clipboardData específica do Internet Explorer.
• No Internet Explorer, os administradores de sistema podem desativar 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. Deixe um comentário se encontrar algum problema ou tiver sugestões para aprimorá-lo.

// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return 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 false;
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

Aqui está a minha opinião sobre esse ...

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@ korayem: Observe que usar o inputcampo html não respeitará quebras de linha \ne achatará qualquer texto em uma única linha.

Conforme mencionado por @nikksan nos comentários, usar textareacorrigirá o problema da seguinte maneira:

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}

Se você deseja uma solução realmente simples (leva menos de 5 minutos para integrar) e fica bem logo de cara , o Clippy é uma boa alternativa para algumas das soluções mais complexas.

Foi escrito por um co-fundador do GitHub. Exemplo de código de incorporação do Flash abaixo:

<object
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   width="110"
   height="14"
   id="clippy">
  <param name="movie" value="/flash/clippy.swf"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noscale"/>
  <param NAME="FlashVars" value="text=#{text}"/>
  <param name="bgcolor" value="#{bgcolor}"/>
  <embed
     src="/flash/clippy.swf"
     width="110"
     height="14"
     name="clippy"
     quality="high"
     allowScriptAccess="always"
     type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer"
     FlashVars="text=#{text}"
     bgcolor="#{bgcolor}"/>
</object>

Lembre-se de substituir #{text}pelo texto que você precisa copiar e #{bgcolor}por uma cor.

Ler e modificar a área de transferência de uma página da Web levanta preocupações de segurança e privacidade. No entanto, no Internet Explorer, é possível fazer isso. Encontrei este exemplo de trecho :

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />

Recentemente, escrevi um post técnico sobre esse problema (trabalho no Lucidchart e recentemente fizemos uma revisão na nossa área de transferência).

Copiar texto sem formatação para a área de transferência é relativamente simples, supondo que você queira fazê-lo durante um evento de cópia do sistema (o usuário pressiona CtrlCou usa o menu do navegador).

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

Colocar o texto na área de transferência não durante um evento de cópia do sistema é muito mais difícil. Parece que algumas dessas outras respostas referenciam maneiras de fazê-lo via Flash, que é a única maneira entre navegadores de fazê-lo (pelo que entendi).

Fora isso, existem algumas opções em cada navegador.

Este é o mais simples no IE, onde você pode acessar o objeto clipboardData a qualquer momento a partir do JavaScript via:

window.clipboardData

(Quando você tenta fazer isso fora de um evento de recortar, copiar ou colar do sistema, no entanto, o IE solicitará ao usuário que conceda permissão à área de transferência do aplicativo Web.)

No Chrome, você pode criar uma extensão do Chrome que concederá permissões de área de transferência (é o que fazemos no Lucidchart). Em seguida, para usuários com sua extensão instalada, você só precisará disparar o evento do sistema:

document.execCommand('copy');

Parece que o Firefox tem algumas opções que permitem aos usuários conceder permissões para determinados sites acessarem a área de transferência, mas eu nunca tentei nenhum deles pessoalmente.

O clipboard.js é um pequeno utilitário que não é o Flash que permite copiar dados de texto ou HTML para a área de transferência. É muito fácil de usar, basta incluir o .js e usar algo como isto:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js também está no GitHub .

Nota: isso foi preterido agora. Migrar para aqui .

ZeroClipboard é a melhor solução entre navegadores que eu encontrei:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

Se você precisar de suporte não flash para iOS, basta adicionar um fallback:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard

Em 2018, veja como você pode fazer isso:

async copySomething(text?) {
  try {
    const toCopy = text || location.href;
    await navigator.clipboard.writeText(toCopy);
    console.log('Text or Page URL copied');
  }
  catch (err) {
    console.error('Failed to copy: ', err);
  }
}

É usado no meu código Angular 6+ da seguinte forma:

<button mat-menu-item (click)="copySomething()">
    <span>Copy link</span>
</button>

Se eu passar uma string, ela a copia. Se nada, ele copia o URL da página.

Também pode ser feita mais ginástica para o material da área de transferência. Veja mais informações aqui:

Desbloqueando o acesso à área de transferência

De um dos projetos em que estou trabalhando, um plug-in de cópia para área de transferência do jQuery que utiliza a biblioteca Zero Clipboard .

É mais fácil de usar do que o plugin nativo da Zero Clipboard se você é um usuário pesado do jQuery.

Como o Chrome 42+ e o Firefox 41+ agora suportam o comando document.execCommand ('copy') . Então, criei algumas funções para a capacidade de copiar para área de transferência em vários navegadores usando uma combinação da resposta antiga de Tim Down e da resposta do desenvolvedor do Google :

function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // IE
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    } 
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
    but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    versions of Chrome feature detection does not work!
    See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));

<pre id="markup">
  Text that can be copied or selected with cross browser support.
</pre>

Eu uso isso com muito sucesso ( sem jQuery ou qualquer outro quadro).

function copyToClp(txt){
    txt = document.createTextNode(txt);
    var m = document;
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

Atenção

As guias são convertidas em espaços (pelo menos no Chrome).

Encontrei a seguinte solução:

No manipulador de teclas, cria a tag "pre". Definimos o conteúdo para copiar para essa tag, depois fazemos uma seleção nessa tag e retornamos true no manipulador. Isso chama o manipulador padrão do chrome e copia o texto selecionado.

E, se necessário, você pode definir o tempo limite da função para restaurar a seleção anterior. Minha implementação no Mootools:

   function EnybyClipboard() {
     this.saveSelection = false;
     this.callback = false;
     this.pastedText = false;

     this.restoreSelection = function() {
       if (this.saveSelection) {
         window.getSelection().removeAllRanges();
         for (var i = 0; i < this.saveSelection.length; i++) {
           window.getSelection().addRange(this.saveSelection[i]);
         }
         this.saveSelection = false;
       }
     };

     this.copyText = function(text) {
       var div = $('special_copy');
       if (!div) {
         div = new Element('pre', {
           'id': 'special_copy',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
       }
       div.set('text', text);
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         setTimeout(this.restoreSelection.bind(this), 100);
       } else return alert('Copy not work. :(');
     };

     this.getPastedText = function() {
       if (!this.pastedText) alert('Nothing to paste. :(');
       return this.pastedText;
     };

     this.pasteText = function(callback) {
       var div = $('special_paste');
       if (!div) {
         div = new Element('textarea', {
           'id': 'special_paste',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
         div.addEvent('keyup', function() {
           if (this.callback) {
             this.pastedText = $('special_paste').get('value');
             this.callback.call(null, this.pastedText);
             this.callback = false;
             this.pastedText = false;
             setTimeout(this.restoreSelection.bind(this), 100);
           }
         }.bind(this));
       }
       div.set('value', '');
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         div.focus();
         this.callback = callback;
       } else return alert('Fail to paste. :(');
     };
   }

Uso:

enyby_clip = new EnybyClipboard(); //init 

enyby_clip.copyText('some_text'); // place this in CTRL+C handler and return true;

enyby_clip.pasteText(function callback(pasted_text) {
        alert(pasted_text);
}); // place this in CTRL+V handler and return true;

Ao colar, ele cria uma área de texto e funciona da mesma maneira.

PS pode ser que esta solução possa ser usada para criar uma solução totalmente para vários navegadores sem flash. Seus trabalhos em FF e Chrome.

Os outros métodos copiarão texto sem formatação para a área de transferência. Para copiar HTML (ou seja, você pode colar os resultados em um editor WSIWYG), você pode fazer o seguinte no IE ONLY . Isso é fundamentalmente diferente dos outros métodos, pois o navegador realmente seleciona visivelmente o conteúdo.

// create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}     
editableDiv.appendChild(someContentElement);          

// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();  
r.execCommand("Copy");

// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();   

Eu montei o que eu acho que é o melhor.

• Usa cssText para evitar exceções no Internet Explorer, em vez de estilizar diretamente.
• Restaura a seleção se houver uma
• Define somente leitura para que o teclado não apareça em dispositivos móveis
• Possui uma solução alternativa para iOS para que ele realmente funcione, pois normalmente bloqueia o execCommand.

Aqui está:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // /programming/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    }
    else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    }
    catch (err) {
      console.error(err);
      return false;
    }
  };
})();

Uso: copyToClipboard('some text')

No Flash 10, você só pode copiar para a área de transferência se a ação se originar da interação do usuário com um objeto Flash. ( Leia a seção relacionada do anúncio do Adobe Flash 10 )

A solução é exagerar um objeto flash acima do botão Copiar ou qualquer elemento que inicia a cópia. Atualmente, a Zero Clipboard é a melhor biblioteca com esta implementação. Desenvolvedores experientes em Flash podem apenas querer criar sua própria biblioteca.

Encontrei a seguinte solução:

Eu tenho o texto em uma entrada oculta. Como setSelectionRangenão funciona em entradas ocultas, alterei temporariamente o tipo para texto, copiei o texto e o ocultei novamente. Se você deseja copiar o texto de um elemento, pode passá-lo para a função e salvar seu conteúdo na variável de destino.

jQuery('#copy').on('click', function () {
    copyToClipboard();
});

function copyToClipboard() {
    var target = jQuery('#hidden_text');

    // Make it visible, so can be focused
    target.attr('type', 'text');
    target.focus();
    // Select all the text
    target[0].setSelectionRange(0, target.val().length);

    // Copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    }
    catch (e) {
        succeed = false;
    }

    // Hide input again
    target.attr('type', 'hidden');

    return succeed;
}

Copie o texto da entrada HTML para a área de transferência:

 function myFunction() {
   /* Get the text field */
   var copyText = document.getElementById("myInput");

   /* Select the text field */
   copyText.select();

   /* Copy the text inside the text field */
   document.execCommand("Copy");

   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }

 <!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">

 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

Nota: O document.execCommand()método não é suportado no Internet Explorer 9 e versões anteriores.

Fonte : W3Schools - Copiar texto para a área de transferência

Já existem muitas respostas, mas gostaria de adicionar uma (jQuery). Funciona muito bem em qualquer navegador, também móvel (por exemplo, avisos sobre segurança, mas quando você o aceita, funciona bem).

function appCopyToClipBoard(sText)
{
    var oText = false,
        bResult = false;
    try
    {
        oText = document.createElement("textarea");
        $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
        oText.select();
        document.execCommand("Copy");
        bResult = true;
    }
    catch(e) {
    }

    $(oText).remove();
    return bResult;
}

No seu código:

if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
    alert('Sorry, copy to clipboard failed.');
}

Esta é uma combinação um pouco entre as outras respostas.

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<textarea name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
          window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}

Ele usa jQuery, mas não precisa, é claro. Você pode mudar isso se quiser. Eu só tinha jQuery à minha disposição. Você também pode adicionar um pouco de CSS para garantir que a entrada não seja exibida. Por exemplo, algo como:

.textToCopyInput{opacity: 0; position: absolute;}

Ou é claro, você também pode fazer um estilo embutido

.append($('<textarea name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )

Em navegadores que não sejam o IE, você precisa usar um pequeno objeto flash para manipular a área de transferência, por exemplo,

• Cópia automática para a área de transferência

Eu tive o mesmo problema ao criar uma edição de grade personalizada (algo como Excel) e compatibilidade com o Excel. Eu tive que apoiar a seleção de várias células, copiar e colar.

Solução: crie uma área de texto na qual você inserirá dados para o usuário copiar (para mim quando o usuário estiver selecionando células), concentre-se nela (por exemplo, quando o usuário pressionar Ctrl) e selecione o texto inteiro.

Então, quando o usuário pressiona Ctrl+C ele / ela recebe as células copiadas, ele / ela seleciona. Após o teste, redimensione a área de texto para um pixel (não testei se ele funcionaria no visor: nenhum). Funciona bem em todos os navegadores e é transparente para o usuário.

Colar - você pode fazer o mesmo assim (difere no seu destino) - manter o foco na área de texto e capturar eventos de colagem usando onpaste (no meu projeto eu uso áreas de texto nas células para editar).

Não consigo colar um exemplo (projeto comercial), mas você entendeu.

Eu usei o clipboard.js.

Podemos obtê-lo em npm:

npm install clipboard --save

E também no Bower

bower install clipboard --save

O uso e os exemplos estão em https://zenorocha.github.io/clipboard.js/ .

Essa é uma expansão da resposta do @ Chase, com a vantagem de funcionar para os elementos IMAGE e TABLE, não apenas os DIVs no IE9.

if (document.createRange) {
    // IE9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // does nothing on FF
} else {
    // IE 8 and earlier.  This stuff won't work on IE9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table). 
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}

Parece que eu interpretei mal a pergunta, mas para referência, você pode extrair um intervalo do DOM (não para a área de transferência; compatível com todos os navegadores modernos) e combiná-lo com os eventos oncopy e onpaste e onbeforepaste para obter o comportamento da área de transferência. Aqui está o código para conseguir isso:

function clipBoard(sCommand) {
  var oRange=contentDocument.createRange();
  oRange.setStart(startNode, startOffset);
  oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning 
and end of the "selection" respectively. startOffset and endOffset are 
constants that are defined as follows:

END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0

and would be used like oRange.START_TO_END */
      switch(sCommand) {
    case "cut":
          this.oFragment=oRange.extractContents();
      oRange.collapse();
      break;
    case "copy":
      this.oFragment=oRange.cloneContents();
      break;
    case "paste":
      oRange.deleteContents();
      var cloneFragment=this.oFragment.cloneNode(true)
      oRange.insertNode(cloneFragment);
      oRange.collapse();
      break;
  }
}

Foi mal. Isso funciona apenas no IE.

Aqui está outra maneira de copiar texto:

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>

Essa foi a única coisa em que comecei a trabalhar, depois de procurar várias maneiras pela Internet. Este é um tópico confuso. Existem muitas soluções publicadas em todo o mundo e a maioria delas não funciona. Isso funcionou para mim:

NOTA: Este código só funcionará quando executado como código síncrono direto para algo como um método 'onClick'. Se você chamar uma resposta assíncrona para o Ajax ou de qualquer outra maneira assíncrona, ele não funcionará.

copyToClipboard(text) {
    var copyText = document.createElement("input");
    copyText.type = "text";
    document.body.appendChild(copyText);
    copyText.style = "display: inline; width: 1px;";
    copyText.value = text;
    copyText.focus();
    document.execCommand("SelectAll");
    document.execCommand("Copy");
    copyText.remove();
}

Sei que esse código mostrará um componente de 1 pixel de largura visivelmente na tela por um milissegundo, mas decidi não me preocupar com isso, que é algo que outras pessoas podem resolver se for um problema real.

Para copiar um texto selecionado ('Texto para copiar') para a área de transferência, crie um Bookmarklet (marcador de navegador que executa JavaScript) e execute-o (clique nele). Ele criará uma área de texto temporária.

Código do GitHub:

https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d

(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();

  node.textContent = text;
  document.body.appendChild(node);

  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');

  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');