1. Inicio
  2. Pregunta y respuesta
  3. Copiar/colocar texto en el portapapeles con FireFox, Safari y Chrome

Copiar/colocar texto en el portapapeles con FireFox, Safari y Chrome

2008-09-24 27 views
101

En Internet Explorer puedo usar el objeto clipboardData para acceder al portapapeles. ¿Cómo puedo hacer eso en Firefox, Safari y/o Chrome?Copiar/colocar texto en el portapapeles con FireFox, Safari y Chrome

Fuente

2008-09-24 GvS

+0

Si desea hacer esto en la consola de Chrome, puede usar 'copy', https: //developer.chrome.com/devtools/docs/commandline-api – wener

+1

posible duplicado de [Cómo copiar al portapapeles en JavaScript ?] (http://stackoverflow.com/questions/400212/how-to-copy-to-the-clipboard-in-javascript) – bjb568

+0

@ bjb568, la pregunta que usted menciona se ha introducido más tarde, por lo que es el duplicado – GvS

Respuesta

11

Ahora hay una manera de hacer esto fácilmente en la mayoría de los navegadores modernos utilizando

document.execCommand('copy');

Esto copiará el texto seleccionado actualmente. Se puede seleccionar un campo de entrada utilizando textArea o

document.getElementById('myText').select();

Para copiar texto invisible que puede generar rápidamente un área de texto, modificar el texto en el cuadro, seleccionarlo, copiarlo, y luego eliminar la caja de texto. En la mayoría de los casos, este textArea ni siquiera parpadea en la pantalla.

Por razones de seguridad, los navegadores solo le 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 llama a un método que copia el texto.

un ejemplo completo se vería

<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>

Fuente

2015-12-02 18:32:30 pythonHelpRequired

51

Por razones de seguridad, Firefox no le permite colocar texto en el portapapeles. Sin embargo, hay una solución alternativa disponible con 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 se habilite Flash.

fuente es actualmente muertos: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ (y así es que es Google cache)

Fuente

2008-09-24 13:17:23 ine

+17

Una tercera desventaja es que no funcionará localmente (file: //) sin cambiar los permisos en flash. http://code.google.com/p/zeroclipboard/ es una biblioteca creada en torno a este método. –

+0

@ b1naryatr0phy: cierto en su mayor parte, pero HTML5 todavía no tiene un reemplazo para la funcionalidad del portapapeles actualmente ofrecida por Flash (por ejemplo, usando ZeroClipboard). –

+3

A partir de 2014, este método ya no funciona en ningún navegador moderno. [ZeroClipboard] (http://zeroclipboard.org/) es la única tecnología que actualmente soluciona este – Cozzamara

8

Firefox no le permiten guardar los datos en el portapapeles, pero debido a las implicaciones de seguridad que está desactivado por defecto. Vea cómo habilitarlo en "Granting JavaScript access to the clipboard" en la base de conocimiento de Mozilla Firefox.

La solución que ofrece amdfan es la mejor si tiene muchos usuarios y la configuración de su navegador no es una opción. Aunque podría probar si el portapapeles está disponible y proporcionar un enlace para cambiar la configuración, si los usuarios son conocedores de la tecnología. El editor de JavaScript TinyMCE sigue este enfoque.

Fuente

2008-09-24 13:22:08

5

La función copyIntoClipboard() funciona para Flash 9, pero parece no estar funcionando por el lanzamiento de Flash Player 10. He aquí una solución que funciona con el nuevo reproductor flash:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

¡Es una solución compleja, pero funciona.

Fuente

2009-01-13 22:12:49 Andomar

+6

No está roto. Se eliminó de la API más reciente por razones de seguridad – Glycerine

4

Tengo que decir que ninguna de estas soluciones realmente trabajo. He probado la solución del portapapeles a partir de la respuesta aceptada, y no funciona con Flash Player 10. También he probado ZeroClipboard, y estuve muy contento con esto por un tiempo.

Actualmente lo estoy usando en mi propio sitio (http://www.blogtrog.com), pero he estado notando errores extraños con él. La forma en que funciona ZeroClipboard es que coloca un objeto flash invisible sobre la parte superior de un elemento en 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 alineadas a la derecha), el objeto flash ZeroClipboard se desajusta y ya no cubre el objeto. Sospecho que probablemente todavía esté sentado donde estaba originalmente. Tienen un código que se supone que detiene eso, o lo cambian al elemento, pero parece que no funciona bien.

Entonces ... en la próxima versión de BlogTrog, supongo que haré lo mismo con todos los demás marcadores de código que he visto en la naturaleza y eliminaré mi botón Copiar al portapapeles. :-(

(me di cuenta de que el ejemplar de dp.syntaxhiglighter al portapapeles ahora se ha roto también.)

Fuente

2009-02-07 02:01:46

+3

Es triste cuando la funcionalidad tiene que dar un paso atrás en nombre de la seguridad. Realmente me gustaría que hubiera una solución segura y que permitiera el acceso al portapapeles desde una página web, incluso si el usuario tiene que otorgarle permiso explícito una vez o algo. – devios1

+0

Eso es lo que hace por defecto IE –

1

una ligera mejora en la solución de Flash es detectar para 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) utilizando el comando copyToClipboard() en lingo.

Fuente

2009-06-01 08:42:35 Travis

1

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.

También se ha actualizado ZeroClipboard para evitar el error mencionado sobre el desplazamiento de página que hace que la película Flash ya no esté en el lugar correcto.

Dado que el 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.

Fuente

2010-06-25 02:50:08 rdivilbiss

2

He usado Github's Clippy para mis necesidades, simple botón basado en Flash. Funciona bien, si uno no necesita un estilo y se complace en insertar qué pegar en el lado del servidor de antemano.

Fuente

2010-06-27 21:42:08 Dr1Ku

0

intente crear una variable global memoria que almacena la selección, luego la otra función puede acceder a la variable y hacer una pasta, 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); 

}

Fuente

2011-03-24 14:46:57

+3

podría copiar de ningún otro lugar sin tener en cuenta dentro de la página solo – Marwan

3

demasiado vieja pregunta, pero no vi esta respuesta en cualquier parte ...

Comprobar este enlace:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

como todo el mundo dice, por razones de seguridad es por defecto disab LED. el enlace de arriba muestra las instrucciones de cómo habilitarlo (editando about: config en firefox o user.js).

Afortunadamente hay un complemento llamado "AllowClipboardHelper" que facilita las cosas con solo unos pocos clics. sin embargo, aún debe indicar a los visitantes de su sitio web cómo habilitar el acceso en Firefox.

Fuente

2011-04-08 22:32:32 Pablo

+0

No creo que haya algo como esto para Chrome/WebKit? – devios1

1

Si el soporte de Flash puede utilizar https://everyplay.com/assets/clipboard.swf y utilizar el texto FlashVars para establecer el texto

https://everyplay.com/assets/clipboard.swf?text=It%20Works

Esa es la que yo uso para copiar y se puede establecer como extra si no soporta estas opciones puede utilizar:

Para Internet Explorer: window.clipboardData.setData (DataFormat, texto) y window.clipboardData.getData (DataFormat)

Puede usar el texto y la URL del archivo de datos para obtener datos y establecer datos.

Y para borrar los datos:

Usted puede utilizar el archivo DataFormat, HTML, imágenes, texto y URL. PD: necesitas usar window.clipboardData.clearData (DataFormat);

Y eso es para otros no soportan window.clipboardData y archivos Flash SWF también puede utilizar el botón de control + C en el teclado para Windows y para Mac de su comando + c

Fuente

2013-08-20 17:53:10 User

10

Es verano de 2015, y con tanta confusión alrededor de Flash pensé en agregar una nueva respuesta a esta pregunta que evita ds su uso en conjunto.

clipboard.js es una buena utilidad que permite copiar texto o datos html en el portapapeles. Es muy fácil de usar, basta con incluir los .js y usar 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 es también de GitHub

Fuente

2015-08-11 15:26:21

+1

El primer enlace que se crea (a npmjs.com) dice que no funciona con IE, pero sí (como de hecho lo dice en GitHub) – gordon613

1

Uso 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>

Fuente

2016-04-13 23:09:58 Trevor

2

Uso Document.ExecCommand moderna ("copia") y jQuery. See this stackoverflow answer

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 a

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>

Fuente

2017-01-09 10:50:44

6

En 2017 usted puede hacer esto (diciendo esto porque este tema es 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 copiar copyStringToClipboard('Hello World')

Si se han fijado la línea setData, y se ha preguntado si se puede establecer diferentes tipos de datos la respuesta es sí.

Fuente

2017-04-18 22:35:04

+0

pregunto si esto funciona en Safari en un iPhone? – Jun

+0

para Safari, necesitaba ejecutar '.select()' en un cuadro de entrada antes de llamar a esto. –

Cuestiones relacionadas

 Cuestiones relacionadas