javascript select and copy to clipboard
Copia al portapapeles con jQuery/js en Chrome (7)
Sé que este tipo de pregunta se ha hecho aquí muchas veces, incluyendo: ¿Cómo copio al portapapeles en JavaScript? o ¿Cómo copiar texto al portapapeles del cliente utilizando jQuery? , Estoy reduciendo el alcance:
Condición:
- funciona bien en Google Chrome (sería bueno si se cruzara el navegador, pero no es necesario)
- sin flash
¿Existe tal solución o solución?
Acabo de encontrar otro repo increíble en Github.
Copia moderna al portapapeles. No flash. Sólo 3kb gzip
Soporte del navegador:
Cuidado: intenté exactamente el mismo guión de Julien Grégoire, sin embargo, no fue lo que provocó la escucha del evento oncopy. La razón, tuve CSS de selección de usuario para la etiqueta del cuerpo.
Así que asegúrese de eliminarlo o configúrelo como initial en el elemento al que está conectado el detector de eventos.
En realidad, para aquellos que lo descubrieron, lo hice funcionar en chrome basado en la respuesta de @JulianGregoire.
Reescribí el código para hacerlo un poco mejor en mi opinión:
el.onclick = function () {
var copy = function (e) {
e.preventDefault();
console.log(''copy'');
var text = "blabla"
if (e.clipboardData) {
e.clipboardData.setData(''text/plain'', text);
} else if (window.clipboardData) {
window.clipboardData.setData(''Text'', text);
}
}
window.addEventListener(''copy'', copy);
document.execCommand(''copy'');
window.removeEventListener(''copy'', copy);
}
La cadena variable se puede copiar al portapapeles utilizando el código js que se encuentra debajo.
var text = ''text to copy'';
var copyFrom = $(''<textarea/>'');
copyFrom.css({
position: "absolute",
left: "-1000px",
top: "-1000px",
});
copyFrom.text(text);
$(''body'').append(copyFrom);
copyFrom.select();
document.execCommand(''copy'');
Puede usar document.execCommand(''copy'') o addEventListener(''copy'') , o una combinación de ambos.
1. Copiar selección en evento personalizado.
Si desea activar una copy en otro evento que no sea ctrl-c o haga clic con el botón derecho del ratón, use document.execCommand(''copy'') . Copiará lo que está seleccionado actualmente. Así, en mouseup por ejemplo:
elem.onmouseup = function(){
document.execCommand(''copy'');
}
EDITAR:
document.execCommand(''copy'' ) solo es compatible con Chrome 42 , IE9 y Opera 29 , pero con Firefox 41 (programado para septiembre de 2015). Tenga en cuenta que IE normalmente le pedirá permiso para acceder al portapapeles.
https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
2. Copiar contenido personalizado en la copia activada por el usuario
O bien, puede usar addEventListener(''copy'') , esto interferirá con el evento de copia y puede colocar el contenido que desee allí. Esto supone que el usuario activa la copia.
EDITAR:
En Chrome, Firefox y Safari, el evento tiene el objeto clipboardData con el método setData . En IE , el objeto clipboardData es una propiedad de ventana. Por lo tanto, esto puede funcionar en todos los principales navegadores siempre que valide dónde está clipboardData .
elem2.addEventListener(''copy'', function (e) {
e.preventDefault();
if (e.clipboardData) {
e.clipboardData.setData(''text/plain'', ''custom content'');
} else if (window.clipboardData) {
window.clipboardData.setData(''Text'', ''custom content'');
}
});
https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
3. un poco de ambos
Usando una combinación, puede copiar contenido personalizado en los eventos deseados. Entonces el primer evento activa execCommand , luego el listener interfiere. Por ejemplo, poner contenido personalizado en hacer clic en un div.
elem3.onclick = function () {
document.execCommand(''copy'');
}
elem3.addEventListener(''copy'', function (e) {
e.preventDefault();
if (e.clipboardData) {
e.clipboardData.setData(''text/plain'', ''custom content from click'');
} else if (window.clipboardData) {
window.clipboardData.setData(''Text'', ''custom content from click'');
}
});
El uso de este último supone que ambos enfoques son compatibles, a partir de julio de 2015, solo funciona en Chrome 43 (quizás 42 no pude probar) e IE al menos 9 y 10. Con Firefox 41 admite execcommand(''copy'') , También debería funcionar.
Tenga en cuenta que para la mayoría de estos métodos y propiedades se declaran como experimentales (o incluso en desuso para IE), por lo que se deben usar con cuidado, pero parece que cada vez son más compatibles.
Jugar con todos los ejemplos: https://jsfiddle.net/jsLfnnvy/12/
Si estás utilizando nocauts, como yo (por alguna razón, todavía lo estoy), querrás echar un vistazo a esta pregunta / respuesta:
function copyToClipboard(s) {
if (window.clipboardData && clipboardData.setData) {
clipboardData.setData(''text'', s);
}
}
Luego llama a la función con el texto y eso debería funcionar.