Copiar/Poner texto en el portapapeles con Firefox, Safari y Chrome
https://stackoverflow.com/questions/127040
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
En Internet Explorer puedo usar el objeto clipboardData para acceder al portapapeles.¿Cómo puedo hacer eso en Firefox, Safari y/o Chrome?
Solución
Ahora existe una manera de hacer esto fácilmente en la mayoría de los navegadores modernos usando
document.execCommand('copy');
Esto copiará el texto actualmente seleccionado.Puede seleccionar un área de texto o un campo de entrada usando
document.getElementById('myText').select();
Para copiar texto de forma invisible, puede generar rápidamente un área de texto, modificar el texto en el cuadro, seleccionarlo, copiarlo y luego eliminar el área de texto.En la mayoría de los casos, este área de texto ni siquiera parpadeará en la pantalla.
Por razones de seguridad, los navegadores solo permitirán copiar si un usuario realiza algún tipo de acción (es decir,haciendo clic en un botón).Una forma de hacerlo sería agregar un evento onClick a un botón html que llame a un método que copie el texto.
Un ejemplo completo sería así
<html>
<head>
<title>copy test</title>
</head>
<body>
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>
<script>
function copier(){
document.getElementById('myText').select();
document.execCommand('copy');
}
</script>
</body>
</html>
Otros consejos
Por razones de seguridad, Firefox no le permite colocar texto en el portapapeles.Sin embargo, existe una solución alternativa que utiliza Flash.
function copyIntoClipboard(text) {
var flashId = 'flashId-HKxmj5';
/* Replace this with your clipboard.swf location */
var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';
if(!document.getElementById(flashId)) {
var div = document.createElement('div');
div.id = flashId;
document.body.appendChild(div);
}
document.getElementById(flashId).innerHTML = '';
var content = '<embed src="' +
clipboardSWF +
'" FlashVars="clipboard=' + encodeURIComponent(text) +
'" width="0" height="0" type="application/x-shockwave-flash"></embed>';
document.getElementById(flashId).innerHTML = content;
}
La única desventaja es que esto requiere que Flash esté habilitado.
La fuente actualmente está muerta: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (y también lo es caché de google)
Las hojas de cálculo en línea enlazan eventos Ctrl+C, Ctrl+V y transfieren el foco a un control TextArea oculto y establecen su contenido en el nuevo contenido deseado del portapapeles para copiarlo o leer su contenido una vez finalizado el evento para pegarlo.
ver también ¿Es posible leer el portapapeles en Firefox, Safari y Chrome usando Javascript?
Es verano de 2015 y con tanta agitación en torno a Flash pensé en agregar una nueva respuesta a esta pregunta que evite su uso por completo.
portapapeles.js es una buena utilidad que permite copiar texto o datos html al portapapeles.Es muy fácil de usar, sólo incluye el .js y usa algo como esto:
<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 también está activado GitHub
En 2017 puedes hacer esto (¡digo esto porque este hilo tiene casi 9 años!)
function copyStringToClipboard (string) {
function handler (event){
event.clipboardData.setData('text/plain', string);
event.preventDefault();
document.removeEventListener('copy', handler, true);
}
document.addEventListener('copy', handler, true);
document.execCommand('copy');
}
Y ahora a copiar copyStringToClipboard('Hello World')
Si notaste el setData línea, y me pregunté si se pueden configurar diferentes tipos de datos, la respuesta es sí.
Firefox le permite almacenar datos en el portapapeles, pero debido a implicaciones de seguridad está deshabilitado de forma predeterminada.Vea cómo habilitarlo en "Otorgar acceso JavaScript al portapapeles" en la base de conocimientos de Mozilla Firefox.
La solución ofrecida por amdfan es la mejor si tienes muchos usuarios y configurar su navegador no es una opción.Aunque puedes probar si el portapapeles está disponible y proporcionar un enlace para cambiar la configuración, si los usuarios tienen conocimientos de tecnología.El editor de JavaScript TinyMCE sigue este enfoque.
La función copyIntoClipboard() funciona para Flash 9, pero parece no funcionar con el lanzamiento de Flash Player 10.Aquí hay una solución que funciona con el nuevo reproductor flash:
http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/
Es una solución compleja, pero funciona.
Debo decir que ninguna de estas soluciones en realidad trabajar.Probé la solución del portapapeles de la respuesta aceptada y no funciona con Flash Player 10.También probé ZeroClipboard y estuve muy contento con él por un tiempo.
Actualmente lo estoy usando en mi propio sitio (http://www.blogtrog.com), pero he notado errores extraños.La forma en que funciona ZeroClipboard es que coloca un objeto flash invisible sobre la parte superior de un elemento de su página.Descubrí que si mi elemento se mueve (como cuando el usuario cambia el tamaño de la ventana y tengo las cosas correctamente alineadas), el objeto flash ZeroClipboard se sale de control y ya no cubre el objeto.Sospecho que probablemente todavía esté donde estaba originalmente.Tienen un código que se supone que debe detener eso o volver a pegarlo al elemento, pero no parece funcionar bien.
Entonces...En la próxima versión de BlogTrog, supongo que haré lo mismo con todos los demás resaltadores de código que he visto y eliminaré el botón Copiar al portapapeles.:-(
(Me di cuenta de que la copia al portapapeles de dp.syntaxhiglighter ahora también está rota).
Pregunta demasiado antigua pero no vi esta respuesta en ninguna parte...
Mira este enlace:
http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard
Como todos dijeron, por razones de seguridad está deshabilitado de forma predeterminada.el enlace de arriba muestra las instrucciones sobre cómo habilitarlo (editando about:config en Firefox o user.js).
Afortunadamente, existe un complemento llamado "AllowClipboardHelper" que facilita las cosas con sólo unos pocos clics.sin embargo, aún necesita instruir a los visitantes de su sitio web sobre cómo habilitar el acceso en Firefox.
He usado Github clippy Para mis necesidades, botón simple basado en Flash.Funciona bien, si uno no necesita estilo y está satisfecho con insertar que pegar en el lado del servidor de antemano.
Use documento moderno.execcommand ("copia") y jQuery. Vea esta respuesta de stackoverflow
var ClipboardHelper = { // as Object
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}};
Como llamar:
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
//todo prepare Text: remove double whitespaces, trim
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
$(document).ready(function()
{
var $body=$('body');
$body.on('click', '*[data-copy-text-to-clipboard]', function(event)
{
var $btn=$(this);
var text=$btn.attr('data-copy-text-to-clipboard');
ClipboardHelper.copyText(text);
});
$body.on('click', '.js-copy-element-to-clipboard', function(event)
{
ClipboardHelper.copyElement($(this));
});
});
})( jQuery, window, document );<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span data-copy-text-to-clipboard=
"Hello
World">
Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World
Element
</span>Una ligera mejora en la solución Flash es detectar flash 10 usando swfobject:
http://code.google.com/p/swfobject/
y luego, si se muestra como flash 10, intente cargar un objeto Shockwave usando javascript.Shockwave también puede leer/escribir en el portapapeles (en todas las versiones) usando el comando copyToClipboard() en jerga.
http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp funciona con Flash 10 y todos los navegadores habilitados para Flash.
Además, ZeroClipboard se ha actualizado para evitar el error mencionado sobre el desplazamiento de página que provoca que la película Flash ya no esté en el lugar correcto.
Dado que ese método "requiere" que el usuario haga clic en un botón para copiar, esto es una conveniencia para el usuario y no ocurre nada nefasto.
Si soportas flash puedes usar https://everyplay.com/assets/clipboard.swf y use el texto flashvars para configurar el texto
https://everyplay.com/assets/clipboard.swf?text=It%20Works
Ese es el que uso para copiar y puedes configurarlo como adicional si no admite estas opciones, puedes usar:
Para Internet Explorer: window.clipboardData.setData(DataFormat, Texto) y window.clipboardData.getData(DataFormat)
Puede utilizar el texto y la URL de DataFormat para obtener datos y establecer datos.
Y para borrar datos:
Puede utilizar el archivo, HTML, imagen, texto y URL de DataFormat.PD:Necesita utilizar window.clipboardData.clearData(DataFormat);
Y para otros que no son compatibles con los archivos flash window.clipboardData y swf, también puede usar el botón control + c en su teclado para Windows y para Mac su comando + c.
Desde el código adicional:
En caso de que alguien más esté buscando cómo hacerlo desde el código de Chrome, puede usar la interfaz nsIClipboardHelper como se describe aquí: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard
Usar document.execCommand('copy').Compatible con las últimas versiones de Chrome, Firefox, Edge, y Safari.
function copyText(text){
function selectElementText(element) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(element);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
var element = document.createElement('DIV');
element.textContent = text;
document.body.appendChild(element);
selectElementText(element);
document.execCommand('copy');
element.remove();
}
var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
copyText(txt.value);
})<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>intente crear una variable global de memoria que almacene la selección, luego la otra función puede acceder a la variable y pegar, por ejemplo.
var memory = '';//outside the functions but within the script tag.
function moz_stringCopy(DOMEle,firstPos,secondPos) {
var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;
}
function moz_stringPaste(DOMEle, newpos) {
DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);
}
API del portapapeles está diseñado para reemplazar document.execCommand.Safari todavía está trabajando en soporte, por lo que debes proporcionar un respaldo hasta que las especificaciones se establezcan y Safari finalice la implementación.
const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
evt.preventDefault();
window.navigator.clipboard.writeText(
permalink.href
).then(() => {
output.textContent = 'Copied';
}, () => {
output.textContent = 'Not copied';
});
};<a href="https://stackoverflow.com/questions/127040/" rel="bookmark">Permalink</a>
<output></output>Por razones de seguridad portapapeles Permissions Puede ser necesario leer y escribir desde el portapapeles.Si el fragmento no funciona en SO, inténtelo localhost o un dominio de confianza.
