Copiar al portapapeles sin Flash

Encontré muchas soluciones para copiar al portapapeles, pero todas con flash o para sitios web. Estoy buscando un método para copiar al portapapeles automáticamente, sin flash y para el lado del usuario, es para scripts de usuario y, por supuesto, entre navegadores.

Sin flash, simplemente no es posible en la mayoría de los navegadores. El portapapeles del usuario es un recurso relevante para la seguridad, ya que podría contener elementos como contraseñas o números de tarjetas de crédito. Por lo tanto, los navegadores no permiten el acceso de Javascript (algunos lo permiten con una advertencia que muestra que el usuario ha confirmado, o con un código Javascript firmado, pero nada de eso es entre navegadores).

Había probado la solución flash y tampoco me gustó. Demasiado complejo y demasiado lento. Lo que hice fue crear un área de texto, poner los datos en eso y usar el comportamiento "CTRL + C" del navegador.

La parte de 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);

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

Ahora, ponga lo que quiere copiar en 'PONGA EL TEXTO A COPIAR AQUÍ. PUEDE SER UNA FUNCIÓN '. zona. Funciona bien para mí. Solo tienes que hacer una combinación CTRL + C. El único inconveniente es que se mostrará un área de texto desagradable en su sitio. Si usa style = "display: none", la solución de copia no funcionará.

clipboard.js acaba de ser lanzado para copiar al portapapeles sin necesidad de Flash

Véalo en acción aquí> http://zenorocha.github.io/clipboard.js/#example-action

¡Finalmente está aquí! (Siempre que no sea compatible con Safari o IE8 ... -_-)

Ahora puede manejar las acciones del portapapeles sin Flash. Aquí está la documentación 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=es

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

^{Mientras espera con impaciencia la compatibilidad de Xbrowser con la API del portapapeles ...}

IE solo solicitará al usuario una vez que acceda al Portapapeles.
Safari (5.1 en el momento de escribir este artículo) no es compatible execCommandconcopy/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 los navegadores (excepto Firefox, que solo puede manejar el tipo mime "plain/text"hasta donde he probado) no han implementado la API del Portapapeles . Es decir, tratando de leer el evento del portapapeles en Chrome usando

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

throws: Uncaught TypeError: constructor ilegal

El mejor recurso del increíble lío que está sucediendo entre los navegadores y el Portapapeles se puede ver aquí (caniuse.com) (→ Siga los comentarios en "Notas" ).
MDN dice que el soporte básico es "(SÍ)" para todos los navegadores, lo cual es inexacto porque uno esperaría que al menos la API funcione, en absoluto.

Puede utilizar un portapapeles local en la página HTML. Esto le permite copiar / cortar / pegar contenido DENTRO de la página HTML, pero no desde / hacia aplicaciones de terceros o entre dos páginas HTML.

Así es como puede escribir una función personalizada para hacer esto (probado en Chrome y Firefox):

Aquí está el FIDDLE que demuestra cómo puede hacer esto.

También pegaré el violín aquí como referencia.

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')harás lo que quieras. Pero no había ejemplos directamente utilizables en este hilo sin cruft, así que aquí 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')

No hay forma de evitarlo, tienes que usar flash. Existe un complemento de JQuery llamado jquery.copy que proporciona copiar y pegar en varios navegadores mediante un archivo flash (swf). Esto es similar a cómo funciona el resaltador de sintaxis en mi blog.

Una vez que haga referencia al archivo jquery.copy.js, todo lo que necesita hacer para enviar datos al portapapeles es ejecutar lo siguiente:

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

Bonito y fácil ;)