javascript - and - js copy to clipboard onclick

Copiar al portapapeles sin Flash

Question

Encontré muchas soluciones para copiar en el portapapeles, pero todas tienen flash o sitios web. Estoy buscando copiar el método al portapapeles de forma automática, sin flash y para el lado del usuario, es para los usuarios y, por supuesto, entre navegadores.

Answer 1

No hay vuelta atrás, tienes que usar el flash. Existe un complemento de JQuery llamado jquery.copy que proporciona copia y pegado de navegador cruzado utilizando un archivo flash (swf). Esto es similar a cómo funciona el resaltador de sintaxis en mi blog.

Una vez que hace 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 ;)

Answer 2

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

La parte javascript de jQuery:

// 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 desea copiar en ''PONGA EL TEXTO PARA 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 tendrá un feo cuadro de texto en su sitio. Si usa style = "display: none", la solución de copia no funcionará.

Answer 3

Puede usar 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 puedes escribir una función personalizada para hacer esto (probado en Chrome y Firefox):

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

También pegaré el violín aquí para 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();

Answer 4

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 cosas como contraseñas o números de tarjetas de crédito. Por lo tanto, los navegadores correctamente 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).

Answer 5

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

Véalo en acción aquí> clipboard.js

Answer 6

document.execCommand(''copy'') hará lo que quieras. Pero no había ejemplos utilizables directamente en este hilo sin cruxis, 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'')

Answer 7

¡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=en

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

Answer 8

^{Mientras espera con impaciencia el soporte de Xbrowser de la API del Portapapeles ...}

Esto funcionará perfectamente en Chrome, Firefox, Edge, IE

IE solo solicitará al usuario una vez que acceda al Portapapeles.
Safari (5.1 en el momento de la escritura) https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

function clip( e ) {
e.preventDefault();
var cont = $(this).html(), // Or use a custom source Element
$txa = $("<textarea />",{val:cont,css:{position:"fixed"}}).appendTo("body").select(),
$msg = $("#clip-popup");
if(document.execCommand(''copy'')) $msg.show().delay(1500).fadeOut(); // CH, FF, Edge, IE
else prompt("Copy to clipboard:/nSelect, Cmd+C, Enter", cont); // Saf, Other
$txa.remove();
}
$(".clip").on("click", clip);

a{cursor: pointer; color: #F00BA4;}
textarea{width:70%; height:100px;}
/* CLIP - MESSAGE POPUP */
#clip-popup{
pointer-events: none;
position: fixed; z-index:9999; display:none;
left: 50%; top: 50%;
transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);
font: 2em/1 sans-serif; color: #1CEA6E;
opacity: 0.9;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clip-popup">Copied to clipboard!</div>
Click an item to copy: <br>
<a class="clip">Lorem</a><br>
<a class="clip"><i>ipsum</i></a><br>
<a class="clip"><b>dolor</b></a><br>
<textarea placeholder="Paste here (or anywhere) to test"></textarea>

Todos los navegadores (excepto Firefox, que solo puede manejar el tipo mime "plain/text" por lo que he probado) no han implementado la API Clipboard . 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: UnEught TypeError: constructor ilegal

El mejor recurso del desorden increíble 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 una causa inexacta, por lo que uno esperaría que al menos funcione la API.