Copiar para a área de transferência sem Flash

Encontrei muitas soluções para copiar para a área de transferência, mas todas elas com flash ou para sites. Estou procurando um método para copiar para a área de transferência automaticamente, sem flash e para o lado do usuário, é para scripts de usuário e, claro, cross-browser.

Sem o flash, isso simplesmente não é possível na maioria dos navegadores. A área de transferência do usuário é um recurso relevante para a segurança, pois pode conter coisas como senhas ou números de cartão de crédito. Assim, os navegadores corretamente não permitem o acesso Javascript a ele (alguns permitem com um aviso mostrado que o usuário confirmou, ou com código Javascript assinado, mas nada disso é cross-browser).

Já tinha experimentado a solução flash e também não gostei. Muito complexo e muito lento. O que fiz foi criar uma textarea, colocar os dados nela e usar o comportamento "CTRL + C" do navegador.

A parte jQuery javascript:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

A parte HTML:
<textarea id="textArea1"></textarea>

Agora, coloque o que você deseja copiar em 'COLOQUE O TEXTO PARA COPIAR AQUI. PODE SER UMA FUNÇÃO. ' área. Funciona bem para mim. Você só precisa fazer uma combinação CTRL + C. A única desvantagem é que você terá uma área de texto feia exibida em seu site. Se você usar o style = "display: none", a solução de cópia não funcionará.

clipboard.js acaba de ser lançado para copiar para a área de transferência sem a necessidade do Flash

Veja-o em ação aqui> http://zenorocha.github.io/clipboard.js/#example-action

Finalmente está aqui! (Contanto que você não suporte Safari ou IE8 ... -_-)

Agora você pode realmente controlar as ações da área de transferência sem Flash. Aqui está a documentação relevante:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

^{Enquanto esperava impacientemente pelo suporte do Xbrowser para a API Clipboard ...}

O IE solicitará ao usuário apenas uma vez para acessar a área de transferência.
Safari (5.1 no momento da escrita) não oferece suporte execCommandparacopy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);

<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

Todos os navegadores (exceto o Firefox, que só consegue lidar com o tipo MIME "plain/text", até onde testei) não implementaram a API Clipboard . Ou seja, tentando ler o evento da área de transferência no Chrome usando

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

throws: Uncaught TypeError: Illegal constructor

O melhor recurso da incrível bagunça que está acontecendo entre os navegadores e a área de transferência pode ser visto aqui (caniuse.com) (→ Siga os comentários em "Notas" ).
MDN diz que o suporte básico é "(SIM)" para todos os navegadores, o que é impreciso porque seria de se esperar que pelo menos a API funcionasse.

Você pode usar uma área de transferência local para a página HTML. Isso permite que você copie / recorte / cole conteúdo DENTRO da página HTML, mas não de / para aplicativos de terceiros ou entre duas páginas HTML.

É assim que você pode escrever uma função personalizada para fazer isso (testado no Chrome e Firefox):

Aqui está o FIDDLE que demonstra como você pode fazer isso.

Também colarei o violino aqui para referência.

HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

document.execCommand('copy')vai fazer o que você quiser. Mas não havia exemplos diretamente utilizáveis ​​neste segmento sem cruft, então aqui está:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

Não tem jeito, você tem que usar o flash. Há um plug-in JQuery chamado jquery.copy que fornece copiar e colar no navegador cruzado usando um arquivo flash (swf). Isso é semelhante a como funciona o realce de sintaxe no meu blog.

Depois de fazer referência ao arquivo jquery.copy.js, tudo o que você precisa fazer para enviar os dados para a área de transferência é executar o seguinte:

$.copy("some text to copy");

Legal e fácil ;)