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

Por razones de seguridad, Firefox no permite colocar texto en el portapapeles. Sin embargo, hay una solución disponible usando 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 está actualmente 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 es caché de Google )

Las hojas de cálculo en línea enganchan los eventos Ctrl+C, Ctrl+V y transfieren el foco a un control de área de texto oculta y establecen su contenido en el nuevo contenido deseado del portapapeles para copiar o leen su contenido después de que el evento haya terminado para pegar.

Ver también ¿Es posible leer el portapapeles en Firefox, Safari y Chrome usando Javascript?

Es verano de 2015, y con tanta agitación que rodea 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, solo 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>

Portapapeles.js también está en [8]} GitHub

Firefox le permite almacenar datos en el portapapeles, pero debido a implicaciones de seguridad está deshabilitado de forma predeterminada. Vea cómo habilitarlo en "Conceder acceso JavaScript al portapapeles" en la base de conocimientos de Mozilla Firefox.

La solución que ofrece amdfan es la mejor si tienes muchos usuarios y configurar 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 técnicos Savvy. El editor JavaScript TinyMCE sigue este enfoque.

En 2017 puedes hacer esto (diciendo 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 copiar copyStringToClipboard('Hello World')

Si notó la línea setData y se preguntó si puede establecer diferentes tipos de datos, la respuesta es sí.

La función copyIntoClipboard() funciona para Flash 9, pero parece estar rota por el lanzamiento de Flash player 10. Aquí hay una solución que funciona con el nuevo flash player:

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

Es una solución compleja, pero funciona.

Tengo que decir que ninguna de estas soluciones realmente funcionan. He probado la solución portapapeles de la respuesta aceptada, y no funciona con Flash Player 10. También he probado ZeroClipboard, y estuve muy contento con él durante un tiempo.

Actualmente lo estoy usando en mi propio sitio ( http://www.blogtrog.com ), pero he estado notando bichos extraños con él. La forma en que ZeroClipboard funciona es colocando un objeto flash invisible sobre un elemento de tu página. He se encontró que si mi elemento se mueve (como cuando el usuario cambia el tamaño de la ventana y tengo las cosas bien alineadas), el objeto flash ZeroClipboard se sale de control y ya no cubre el objeto. Sospecho que probablemente todavía está sentado donde estaba originalmente. Tienen código que se supone que debe detener eso, o volver a pegarlo al elemento, pero no parece funcionar bien.

So... en la próxima versión de BlogTrog, supongo que seguiré el ejemplo con todos los otros resaltadores de código que he visto en el salvaje y eliminar mi copia al botón del portapapeles. :-(

(Me di cuenta de que dp.la copia de syntaxhiglighter al Portapapeles ahora también está rota.)

Pregunta demasiado vieja pero no vi esta respuesta en ninguna parte...

Compruebe este enlace:

Http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

Como todo el mundo dijo, por razones de seguridad está desactivado por defecto. el enlace anterior muestra las instrucciones de cómo habilitarlo (editando about: config en firefox o el usuario.js).

Afortunadamente hay un plugin llamado "AllowClipboardHelper" que hace las cosas más fáciles con solo unos pocos clics. sin embargo, aún debe instruir a los visitantes de su sitio web sobre cómo habilitar el acceso en Firefox.

He usado el Clippy de Github para mis necesidades, simple botón basado en Flash. Funciona bien, si uno no necesita estilo y está satisfecho con insertar qué pegar en el lado del servidor de antemano.

Utilice el documento moderno.execCommand("copiar") y jQuery. Ver 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();
}};

Cómo 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 puede leer / escribir en el portapapeles (en todas las versiones) también 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.

También se ha actualizado ZeroClipboard para evitar el error mencionado sobre el desplazamiento de la página que hace 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 admite flash, puede usar https://everyplay.com/assets/clipboard.swf y use el texto de flashvars para establecer el texto

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

Ese es el que utilizo para copiar y puedes establecer como extra si no soporta estas opciones puedes usar :

Para Internet Explorer: ventana.clipboardData.setData (Formato de datos, Texto) y ventana.clipboardData.getData (dataFormat)

Puede utilizar el Texto y Url de dataFormat para getData y setData.

Y para borrar datos:

Puede utilizar el Archivo del Formato de datos, HTML, Imagen, Texto y URL. PD: Es Necesario Utilizar la ventana.clipboardData.ClearData (dataFormat);

Y para otros eso no es ventana de soporte.clipboardData y archivos swf flash también puede utilizar el botón control + c en su teclado para Windows y para mac su comando + c

Desde el código del complemento:

En caso de que alguien más estuviera buscando cómo hacerlo desde el código chrome, puede usar la interfaz nsIClipboardHelper como se describe aquí: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

Use 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 hacer un pegado, 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);

}