¿Cuál es la mejor manera de copiar texto al portapapeles? (multi-navegador)

Yo he tratado:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

pero en Internet Explorer da un error de sintaxis. En Firefox, dice unsafeWindow is not defined.

Un buen truco sin flash: ¿cómo accede Trello al portapapeles del usuario?

Visión general

Hay tres API principales del navegador para copiar en el portapapeles:

1. API del portapapeles asíncrono [navigator.clipboard.writeText]
   • Parte centrada en texto disponible en Chrome 66 (marzo de 2018)
   • El acceso es asíncrono y usa Promesas de JavaScript , puede escribirse para que las indicaciones del usuario de seguridad (si se muestran) no interrumpan el JavaScript en la página.
   • El texto se puede copiar al portapapeles directamente desde una variable.
   • Solo se admite en páginas publicadas a través de HTTPS.
   • En Chrome 66 páginas en pestañas activas pueden escribir en el portapapeles sin un aviso de permisos.
2. document.execCommand('copy')
   • La mayoría de los navegadores admiten esto a partir de ~ abril de 2015 (consulte la Ayuda del navegador a continuación).
   • El acceso es sincrónico, es decir, detiene JavaScript en la página hasta que se completa, incluida la visualización y la interacción del usuario con cualquier mensaje de seguridad.
   • El texto se lee del DOM y se coloca en el portapapeles.
   • Durante las pruebas ~ abril de 2015, solo se observó que Internet Explorer mostraba solicitudes de permisos mientras escribía en el portapapeles.
3. Anular el evento de copia
   • Consulte la documentación de la API del Portapapeles sobre Anulación del evento de copia .
   • Le permite modificar lo que aparece en el portapapeles desde cualquier evento de copia, puede incluir otros formatos de datos que no sean texto sin formato.
   • No se cubre aquí, ya que no responde directamente a la pregunta.

Notas generales de desarrollo

No espere que los comandos relacionados con el portapapeles funcionen mientras está probando el código en la consola. En general, se requiere que la página esté activa (API del portapapeles asíncrono) o requiere la interacción del usuario (por ejemplo, un clic del usuario) para permitir que ( document.execCommand('copy')) acceda al portapapeles. Consulte a continuación para obtener más detalles.

IMPORTANTE (indicado aquí 2020/02/20)

Tenga en cuenta que, dado que esta publicación se escribió originalmente en desuso de permisos en IFRAME de origen cruzado y otros "sandboxing" de IFRAME, se evita que los demos integrados "Ejecutar fragmento de código" y "ejemplo codepen.io" funcionen en algunos navegadores (incluidos Chrome y Microsoft Edge )

Para desarrollar, cree su propia página web, sirva esa página a través de la conexión HTTPS para probar y desarrollar.

Aquí hay una página de prueba / demostración que demuestra el funcionamiento del código: https://deanmarktaylor.github.io/clipboard-test/

Async + Fallback

Debido al nivel de soporte del navegador para la nueva API Async Clipboard, es probable que desee recurrir al document.execCommand('copy')método para obtener una buena cobertura del navegador.

Aquí hay un ejemplo simple (puede que no funcione incrustado en este sitio, lea la nota "importante" arriba):

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

(el ejemplo de codepen.io puede no funcionar, lea la nota "importante" anterior) Tenga en cuenta que este fragmento no funciona bien en la vista previa incrustada de Stack Overflow. Puede probarlo aquí: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011

API del portapapeles asíncrono

• Publicación de anuncio de Chrome 66 (marzo de 2018)
• Referencia del borrador de la documentación del API del Portapapeles asíncrono

Tenga en cuenta que existe la posibilidad de "solicitar permiso" y probar el acceso al portapapeles a través de la API de permisos en Chrome 66.

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ('copia')

El resto de esta publicación trata los matices y detalles de la document.execCommand('copy')API.

Soporte de navegador

El document.execCommand('copy')soporte de JavaScript ha crecido, consulte los enlaces a continuación para obtener actualizaciones del navegador:

• Internet Explorer 10+ (aunque este documento indica que hubo soporte de Internet Explorer 5.5+).
• Google Chrome 43+ (~ abril de 2015)
• Mozilla Firefox 41+ (envío ~ septiembre de 2015)
• Opera 29+ (basado en Chromium 42, ~ abril de 2015)

Ejemplo simple

(puede no funcionar integrado en este sitio, lea la nota "importante" arriba)

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

Ejemplo complejo: copiar al portapapeles sin mostrar la entrada

El ejemplo anterior simple funciona muy bien si hay una textareao inputelemento visible en la pantalla.

En algunos casos, es posible que desee copiar texto en el portapapeles sin mostrar un elemento input/ textarea. Este es un ejemplo de una forma de evitar esto (básicamente insertar elemento, copiar al portapapeles, eliminar elemento):

Probado con Google Chrome 44, Firefox 42.0a1 e Internet Explorer 11.0.8600.17814.

(puede no funcionar integrado en este sitio, lea la nota "importante" arriba)

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a
  // flash, so some of these are just precautions. However in
  // Internet Explorer the element is visible whilst the popup
  // box asking the user for permission for the web page to
  // copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

Notas adicionales

Solo funciona si el usuario toma una acción

Todas las document.execCommand('copy')llamadas deben realizarse como resultado directo de una acción del usuario, por ejemplo, haga clic en el controlador de eventos. Esta es una medida para evitar jugar con el portapapeles del usuario cuando no lo esperan.

Vea la publicación de Google Developers aquí para obtener más información.

API del portapapeles

Tenga en cuenta que la especificación del borrador de la API del Portapapeles se puede encontrar aquí: https://w3c.github.io/clipboard-apis/

¿Es compatible?

• document.queryCommandSupported('copy')debería regresar truesi el comando "es compatible con el navegador".
• y document.queryCommandEnabled('copy')regresar truesi document.execCommand('copy')tendrá éxito si se llama ahora. Verificación para asegurarse de que se llamó al comando desde un hilo iniciado por el usuario y se cumplen otros requisitos.

Sin embargo, como un ejemplo de los problemas de compatibilidad del navegador, Google Chrome desde abril a ~ ~ de octubre de de 2015 devueltos truede document.queryCommandSupported('copy')si el comando se llama desde un hilo iniciado por el usuario.

Observe los detalles de compatibilidad a continuación.

Detalle de compatibilidad del navegador

Si bien una simple llamada a document.execCommand('copy')encapsulado en un try/ catchbloque llamado como resultado de un clic del usuario obtendrá la mayor compatibilidad, el uso tiene algunas condiciones:

Cualquier llamada a document.execCommand, document.queryCommandSupportedo document.queryCommandEnableddebe estar envuelto en un try/ catchbloque.

Las diferentes implementaciones y versiones de navegador lanzan diferentes tipos de excepciones cuando se llama en lugar de regresar false.

Las diferentes implementaciones de navegador todavía están en proceso de cambio y la API del Portapapeles todavía está en borrador, así que recuerde hacer sus pruebas.

La copia automática al portapapeles puede ser peligrosa, por lo tanto, la mayoría de los navegadores (excepto IE) lo hacen muy difícil. Personalmente, utilizo el siguiente truco simple:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

Al usuario se le presenta el cuadro de aviso, donde el texto a copiar ya está seleccionado. Ahora es suficiente presionar Ctrl+ Cy Enter(para cerrar el cuadro) - ¡y listo!

Ahora la operación de copia del portapapeles es SEGURA, porque el usuario lo hace manualmente (pero de una manera bastante directa). Por supuesto, funciona en todos los navegadores.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>

El siguiente enfoque funciona en Chrome, Firefox, Internet Explorer y Edge, y en versiones recientes de Safari (se agregó soporte de copia en la versión 10 que se lanzó en octubre de 2016).

• Cree un área de texto y establezca su contenido en el texto que desea copiar en el portapapeles.
• Agregue el área de texto al DOM.
• Seleccione el texto en el área de texto.
• Llame a document.execCommand ("copia")
• Elimina el área de texto del dom.

Nota: no verá el área de texto, ya que se agrega y elimina dentro de la misma invocación síncrona del código Javascript.

Algunas cosas a tener en cuenta si está implementando esto usted mismo:

• Por razones de seguridad, esto solo se puede llamar desde un controlador de eventos como clic (al igual que con la apertura de ventanas).
• Internet Explorer mostrará un diálogo de permiso la primera vez que se actualice el portapapeles.
• Internet Explorer y Edge se desplazarán cuando el área de texto esté enfocada.
• execCommand () puede lanzar en algunos casos.
• Las nuevas líneas y pestañas pueden tragarse a menos que use un área de texto. (La mayoría de los artículos parecen recomendar el uso de un div)
• El área de texto estará visible mientras se muestra el cuadro de diálogo de Internet Explorer, o bien debe ocultarlo o utilizar la API de clipboardData específica de Internet Explorer.
• En Internet Explorer, los administradores del sistema pueden deshabilitar la API del portapapeles.

La siguiente función debe manejar todos los siguientes problemas de la manera más limpia posible. Por favor, deje un comentario si encuentra algún problema o tiene alguna sugerencia para mejorarlo.

// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text);

    }
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

Aquí está mi opinión sobre ese ...

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@korayem: Tenga en cuenta que el uso del inputcampo html no respetará los saltos de línea \ny aplanará cualquier texto en una sola línea.

Como mencionó @nikksan en los comentarios, el uso textareasolucionará el problema de la siguiente manera:

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}

Si desea una solución realmente simple (se tarda menos de 5 minutos en integrarse) y se ve bien desde el primer momento, entonces Clippy es una buena alternativa a algunas de las soluciones más complejas.

Fue escrito por un cofundador de GitHub. Ejemplo de código de inserción Flash a continuación:

<object
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   width="110"
   height="14"
   id="clippy">
  <param name="movie" value="/flash/clippy.swf"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noscale"/>
  <param NAME="FlashVars" value="text=#{text}"/>
  <param name="bgcolor" value="#{bgcolor}"/>
  <embed
     src="/flash/clippy.swf"
     width="110"
     height="14"
     name="clippy"
     quality="high"
     allowScriptAccess="always"
     type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer"
     FlashVars="text=#{text}"
     bgcolor="#{bgcolor}"/>
</object>

Recuerde reemplazar #{text}con el texto que necesita copiar y #{bgcolor}con un color.

Leer y modificar el portapapeles desde una página web plantea problemas de seguridad y privacidad. Sin embargo, en Internet Explorer, es posible hacerlo. Encontré este fragmento de ejemplo :

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />

Recientemente escribí una publicación técnica en un blog sobre este mismo problema (trabajo en Lucidchart y recientemente realizamos una revisión en nuestro portapapeles).

Copiar texto sin formato al portapapeles es relativamente simple, suponiendo que desee hacerlo durante un evento de copia del sistema (el usuario presiona CtrlCo usa el menú del navegador).

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

Poner texto en el portapapeles no durante un evento de copia del sistema es mucho más difícil. Parece que algunas de estas otras respuestas hacen referencia a formas de hacerlo a través de Flash, que es la única forma de hacerlo entre navegadores (hasta donde yo entiendo).

Aparte de eso, hay algunas opciones navegador por navegador.

Esto es lo más simple en IE, donde puede acceder al objeto clipboardData en cualquier momento desde JavaScript a través de:

window.clipboardData

(Sin embargo, cuando intente hacer esto fuera de un evento de cortar, copiar o pegar del sistema, IE solicitará al usuario que otorgue el permiso del portapapeles de la aplicación web).

En Chrome, puede crear una extensión de Chrome que le otorgará permisos de portapapeles (esto es lo que hacemos para Lucidchart). Luego, para los usuarios con su extensión instalada, solo tendrá que activar el evento del sistema usted mismo:

document.execCommand('copy');

Parece que Firefox tiene algunas opciones que permiten a los usuarios otorgar permisos a ciertos sitios para acceder al portapapeles, pero no he probado ninguno de estos personalmente.

clipboard.js es una pequeña utilidad que no es Flash y que permite copiar texto o datos HTML en el portapapeles. Es muy fácil de usar, solo incluya el .js y use 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á en GitHub .

Nota: Esto ha quedado en desuso ahora. Migra a aquí .

ZeroClipboard es la mejor solución de navegador cruzado que he encontrado:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

Si necesita soporte sin flash para iOS, simplemente agregue un respaldo:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard

En 2018, así es como puedes hacerlo:

async copySomething(text?) {
  try {
    const toCopy = text || location.href;
    await navigator.clipboard.writeText(toCopy);
    console.log('Text or Page URL copied');
  }
  catch (err) {
    console.error('Failed to copy: ', err);
  }
}

Se usa en mi código Angular 6+ así:

<button mat-menu-item (click)="copySomething()">
    <span>Copy link</span>
</button>

Si paso una cadena, la copia. Si nada, copia la URL de la página.

También se puede hacer más gimnasia para las cosas del portapapeles. Ver más información aquí:

Desbloqueo del acceso al portapapeles

De uno de los proyectos en los que he estado trabajando, un complemento jQuery de copiar al portapapeles que utiliza el Portapapeles cero biblioteca .

Es más fácil de usar que el complemento nativo Zero Clipboard si eres un gran usuario de jQuery.

Dado que Chrome 42+ y Firefox 41+ ahora son compatibles con comando document.execCommand ('copy') . Así que he creado un par de funciones para una capacidad multi-navegador de Copiar en el portapapeles utilizando una combinación de vieja respuesta de Tim hacia abajo y la respuesta de Google para desarrolladores :

function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // IE
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    } 
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
    but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    versions of Chrome feature detection does not work!
    See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));

<pre id="markup">
  Text that can be copied or selected with cross browser support.
</pre>

Lo uso con mucho éxito ( sin jQuery o cualquier otro marco).

function copyToClp(txt){
    txt = document.createTextNode(txt);
    var m = document;
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

Advertencia

Las pestañas se convierten en espacios (al menos en Chrome).

Encontré la siguiente solución:

En el controlador de tecla abajo crea la etiqueta "pre". Configuramos el contenido para copiarlo en esta etiqueta, luego hacemos una selección en esta etiqueta y regresamos verdadero en el controlador. Esto llama al controlador estándar de Chrome y copia el texto seleccionado.

Y si lo necesita, puede configurar el tiempo de espera para la función de restaurar la selección anterior. Mi implementación en Mootools:

   function EnybyClipboard() {
     this.saveSelection = false;
     this.callback = false;
     this.pastedText = false;

     this.restoreSelection = function() {
       if (this.saveSelection) {
         window.getSelection().removeAllRanges();
         for (var i = 0; i < this.saveSelection.length; i++) {
           window.getSelection().addRange(this.saveSelection[i]);
         }
         this.saveSelection = false;
       }
     };

     this.copyText = function(text) {
       var div = $('special_copy');
       if (!div) {
         div = new Element('pre', {
           'id': 'special_copy',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
       }
       div.set('text', text);
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         setTimeout(this.restoreSelection.bind(this), 100);
       } else return alert('Copy not work. :(');
     };

     this.getPastedText = function() {
       if (!this.pastedText) alert('Nothing to paste. :(');
       return this.pastedText;
     };

     this.pasteText = function(callback) {
       var div = $('special_paste');
       if (!div) {
         div = new Element('textarea', {
           'id': 'special_paste',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
         div.addEvent('keyup', function() {
           if (this.callback) {
             this.pastedText = $('special_paste').get('value');
             this.callback.call(null, this.pastedText);
             this.callback = false;
             this.pastedText = false;
             setTimeout(this.restoreSelection.bind(this), 100);
           }
         }.bind(this));
       }
       div.set('value', '');
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         div.focus();
         this.callback = callback;
       } else return alert('Fail to paste. :(');
     };
   }

Uso:

enyby_clip = new EnybyClipboard(); //init 

enyby_clip.copyText('some_text'); // place this in CTRL+C handler and return true;

enyby_clip.pasteText(function callback(pasted_text) {
        alert(pasted_text);
}); // place this in CTRL+V handler and return true;

Al pegar, crea textarea y funciona de la misma manera.

PS puede ser esta solución se puede utilizar para crear una solución completamente entre navegadores sin flash. Funciona en FF y Chrome.

Los otros métodos copiarán texto plano en el portapapeles. Para copiar HTML (es decir, puede pegar resultados en un editor WSIWYG), puede hacer lo siguiente en IE SOLAMENTE . Esto es fundamentalmente diferente de los otros métodos, ya que el navegador realmente selecciona visiblemente el contenido.

// create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}     
editableDiv.appendChild(someContentElement);          

// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();  
r.execCommand("Copy");

// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();   

He reunido lo que creo que es el mejor.

• Utiliza cssText para evitar excepciones en Internet Explorer en lugar de estilo directamente.
• Restaura la selección si hubo una
• Establece solo lectura para que el teclado no aparezca en dispositivos móviles
• Tiene una solución alternativa para iOS para que realmente funcione, ya que normalmente bloquea execCommand.

Aquí está:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // /programming/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    }
    else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    }
    catch (err) {
      console.error(err);
      return false;
    }
  };
})();

Uso: copyToClipboard('some text')

A partir de Flash 10, solo puede copiar al portapapeles si la acción se origina en la interacción del usuario con un objeto Flash. ( Lea la sección relacionada del anuncio de Adobe Flash 10 )

La solución es colocar un objeto flash sobre el botón Copiar, o cualquier elemento que inicie la copia. Zero Clipboard es actualmente la mejor biblioteca con esta implementación. Los desarrolladores de Flash con experiencia pueden querer crear su propia biblioteca.

Encontré la siguiente solución:

Tengo el texto en una entrada oculta. Como setSelectionRangeno funciona en entradas ocultas, cambié temporalmente el tipo de texto, copié el texto y luego lo oculté nuevamente. Si desea copiar el texto de un elemento, puede pasarlo a la función y guardar su contenido en la variable de destino.

jQuery('#copy').on('click', function () {
    copyToClipboard();
});

function copyToClipboard() {
    var target = jQuery('#hidden_text');

    // Make it visible, so can be focused
    target.attr('type', 'text');
    target.focus();
    // Select all the text
    target[0].setSelectionRange(0, target.val().length);

    // Copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    }
    catch (e) {
        succeed = false;
    }

    // Hide input again
    target.attr('type', 'hidden');

    return succeed;
}

Copie el texto de la entrada HTML al portapapeles:

 function myFunction() {
   /* Get the text field */
   var copyText = document.getElementById("myInput");

   /* Select the text field */
   copyText.select();

   /* Copy the text inside the text field */
   document.execCommand("Copy");

   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }

 <!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">

 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

Nota: El document.execCommand()método no es compatible con Internet Explorer 9 y versiones anteriores.

Fuente : W3Schools - Copiar texto al portapapeles

Ya hay muchas respuestas, sin embargo, me gusta agregar una (jQuery). Funciona muy bien en cualquier navegador, también en dispositivos móviles (es decir, pregunta sobre la seguridad, pero cuando lo acepta, funciona bien).

function appCopyToClipBoard(sText)
{
    var oText = false,
        bResult = false;
    try
    {
        oText = document.createElement("textarea");
        $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
        oText.select();
        document.execCommand("Copy");
        bResult = true;
    }
    catch(e) {
    }

    $(oText).remove();
    return bResult;
}

En su código:

if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
    alert('Sorry, copy to clipboard failed.');
}

Esta es una combinación de las otras respuestas.

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<textarea name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
          window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}

Utiliza jQuery, pero no tiene que hacerlo, por supuesto. Puedes cambiar eso si quieres. Acabo de tener jQuery a mi disposición. También puede agregar un poco de CSS para asegurarse de que la entrada no se muestre. Por ejemplo algo como:

.textToCopyInput{opacity: 0; position: absolute;}

O, por supuesto, también podrías hacer un estilo en línea

.append($('<textarea name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )

En los navegadores que no sean IE, debe usar un pequeño objeto flash para manipular el portapapeles, p. Ej.

• Copia automática al portapapeles

Tuve el mismo problema al crear una edición de cuadrícula personalizada (algo así como Excel) y la compatibilidad con Excel. Tuve que soportar seleccionar varias celdas, copiar y pegar.

Solución: cree un área de texto donde inserte datos para que el usuario los copie (para mí cuando el usuario selecciona celdas), establezca el foco en él (por ejemplo, cuando el usuario presiona Ctrl ) y seleccione todo el texto.

Entonces, cuando el usuario presiona Ctrl+C él / ella obtiene las celdas copiadas que él / ella seleccionó. Después de probar, simplemente redimensionar el área de texto a un píxel (no probé si funcionará en la pantalla: ninguno). Funciona bien en todos los navegadores, y es transparente para el usuario.

Pegar: podría hacer lo mismo (difiere en su objetivo): manténgase enfocado en textarea y capture eventos de pegar usando onpaste (en mi proyecto uso textareas en celdas para editar).

No puedo pegar un ejemplo (proyecto comercial), pero entiendes la idea.

He usado clipboard.js.

Podemos obtenerlo en npm:

npm install clipboard --save

Y también en Bower

bower install clipboard --save

El uso y los ejemplos están en https://zenorocha.github.io/clipboard.js/ .

Esta es una expansión de la respuesta de @ Chase, con la ventaja de que funcionará para elementos de IMAGEN y TABLA, no solo DIV en IE9.

if (document.createRange) {
    // IE9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // does nothing on FF
} else {
    // IE 8 and earlier.  This stuff won't work on IE9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table). 
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}

Parece que leí mal la pregunta, pero como referencia, puede extraer un rango del DOM (no al portapapeles; compatible con todos los navegadores modernos) y combinarlo con los eventos oncopy y onpaste y onbeforepaste para obtener el comportamiento del portapapeles. Aquí está el código para lograr esto:

function clipBoard(sCommand) {
  var oRange=contentDocument.createRange();
  oRange.setStart(startNode, startOffset);
  oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning 
and end of the "selection" respectively. startOffset and endOffset are 
constants that are defined as follows:

END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0

and would be used like oRange.START_TO_END */
      switch(sCommand) {
    case "cut":
          this.oFragment=oRange.extractContents();
      oRange.collapse();
      break;
    case "copy":
      this.oFragment=oRange.cloneContents();
      break;
    case "paste":
      oRange.deleteContents();
      var cloneFragment=this.oFragment.cloneNode(true)
      oRange.insertNode(cloneFragment);
      oRange.collapse();
      break;
  }
}

Culpa mía. Esto solo funciona en IE.

Aquí hay otra forma de copiar texto:

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>

Esto fue lo único que pude trabajar, después de buscar varias maneras en Internet. Este es un tema desordenado. Hay muchas soluciones publicadas en todo el mundo y la mayoría de ellas no funcionan. Esto funcionó para mí:

NOTA: Este código solo funcionará cuando se ejecute como código síncrono directo a algo como un método 'onClick'. Si llama en una respuesta asincrónica a Ajax o de cualquier otra forma asincrónica, no funcionará.

copyToClipboard(text) {
    var copyText = document.createElement("input");
    copyText.type = "text";
    document.body.appendChild(copyText);
    copyText.style = "display: inline; width: 1px;";
    copyText.value = text;
    copyText.focus();
    document.execCommand("SelectAll");
    document.execCommand("Copy");
    copyText.remove();
}

Me doy cuenta de que este código mostrará un componente de 1 píxel de ancho visible en la pantalla durante un milisegundo, pero decidí no preocuparme por eso, que es algo que otros pueden abordar si es un problema real.

Para copiar un texto seleccionado ('Texto para copiar') a su portapapeles, cree un Bookmarklet (marcador de navegador que ejecute JavaScript) y ejecútelo (haga clic en él). Creará un área de texto temporal.

Código de GitHub:

https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d

(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();

  node.textContent = text;
  document.body.appendChild(node);

  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');

  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');