¿Cómo copio el texto dentro de un div en el portapapeles? Tengo un div y necesito agregar un enlace que agregará el texto al portapapeles. ¿Existe alguna solucion para esto?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

Después de hacer clic en copiar texto, luego presiono Ctrl+ V, debe pegarse.

Editar a partir de 2016

A partir de 2016, ahora puede copiar texto en el portapapeles en la mayoría de los navegadores porque la mayoría de los navegadores tienen la capacidad de copiar mediante programación una selección de texto en el portapapeles mediante el uso document.execCommand("copy")de una selección.

Al igual que con otras acciones en un navegador (como abrir una nueva ventana), la copia al portapapeles solo se puede realizar a través de una acción específica del usuario (como un clic del mouse). Por ejemplo, no se puede hacer a través de un temporizador.

Aquí hay un ejemplo de código:

document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
});

function copyToClipboard(elem) {
	  // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try {
    	  succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }
    
    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

input {
  width: 400px;
}

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Aquí hay una demostración un poco más avanzada: https://jsfiddle.net/jfriend00/v9g1x0o6/

Y también puede obtener una biblioteca preconstruida que hace esto por usted con clipboard.js .

Parte antigua e histórica de la respuesta

Ningún navegador moderno permite copiar directamente al portapapeles a través de JavaScript por razones de seguridad. La solución más común es usar una capacidad Flash para copiar en el portapapeles que solo puede activarse con un clic directo del usuario.

Como ya se mencionó, ZeroClipboard es un conjunto de código popular para administrar el objeto Flash para hacer la copia. Lo he usado Si Flash está instalado en el dispositivo de navegación (que descarta móvil o tableta), funciona.

La siguiente solución más común es colocar el texto enlazado al portapapeles en un campo de entrada, mover el foco a ese campo y aconsejar al usuario que presione Ctrl+ Cpara copiar el texto.

Se pueden encontrar otras discusiones sobre el problema y posibles soluciones alternativas en estas publicaciones anteriores de Stack Overflow:

• ¿Cómo copio al portapapeles en JavaScript?

• ¿Cómo copiar texto al portapapeles del cliente usando jQuery?

• ¿Cómo se puede copiar al portapapeles sin Flash?

Estas preguntas que piden una alternativa moderna al uso de Flash han recibido muchas votos a favor y ninguna respuesta con una solución (probablemente porque no existe):

• ¿Alternativa HTML5 al ZeroClipboard basado en flash para la copia segura de datos al portapapeles?

• Copiar al portapapeles sin Flash

Internet Explorer y Firefox solían tener API no estándar para acceder al portapapeles, pero sus versiones más modernas han desaprobado esos métodos (probablemente por razones de seguridad).

Hay un esfuerzo naciente de estándares para tratar de encontrar una forma "segura" de resolver los problemas más comunes del portapapeles (probablemente requiera una acción específica del usuario como lo requiere la solución Flash), y parece que puede implementarse parcialmente en la última versión. versiones de Firefox y Chrome, pero aún no lo he confirmado.

Actualización 2020 : esta solución utiliza execCommand. Si bien esa característica estaba bien en el momento de escribir esta respuesta, ahora se considera obsoleta . Todavía funcionará en muchos navegadores, pero se desaconseja su uso, ya que se puede suspender el soporte.

Hay otra forma que no es Flash (aparte de la API del Portapapeles mencionada en la respuesta de jfriend00 ). Debe seleccionar el texto y luego ejecutar el comandocopy para copiar en el portapapeles el texto seleccionado actualmente en la página.

Por ejemplo, esta función copiará el contenido del elemento pasado en el portapapeles (actualizado con una sugerencia en los comentarios de PointZeroTwo ):

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Así es como funciona:

1. Crea un campo de texto oculto temporalmente.
2. Copia el contenido del elemento en ese campo de texto.
3. Selecciona el contenido del campo de texto.
4. Ejecuta la copia de comando como: document.execCommand("copy").
5. Elimina el campo de texto temporal.

Puedes ver una demostración rápida aquí:

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

El problema principal es que no todos los navegadores admiten esta función en este momento, pero puede usarla en los principales desde:

• Cromo 43
• Internet Explorer 10
• Firefox 41
• Safari 10

Actualización 1: Esto se puede lograr también con una solución de JavaScript puro (sin jQuery):

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

}

<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

Observe que pasamos la identificación sin el # ahora.

Como madzohan informó en los comentarios a continuación, hay algunos problemas extraños con la versión de 64 bits de Google Chrome en algunos casos (ejecutar el archivo localmente). Este problema parece solucionarse con la solución anterior que no es jQuery.

Madzohan lo intentó en Safari y la solución funcionó pero usando en document.execCommand('SelectAll')lugar de usar .select()(como se especifica en el chat y en los comentarios a continuación).

Como PointZeroTwo señala en los comentarios , el código podría mejorarse para que arroje un resultado de éxito / fracaso. Puede ver una demostración en este jsFiddle .

ACTUALIZACIÓN: COPIA MANTENIENDO EL FORMATO DE TEXTO

Como señaló un usuario en la versión en español de StackOverflow , las soluciones enumeradas anteriormente funcionan perfectamente si desea copiar el contenido de un elemento literalmente, pero no funcionan tan bien si desea pegar el texto copiado con formato (como se copia en un input type="text", el formato se "pierde").

Una solución para eso sería copiar en un contenido editable divy luego copiarlo usando de la execCommandmisma manera. Aquí hay un ejemplo: haga clic en el botón Copiar y luego péguelo en el cuadro editable de contenido a continuación:

function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

Y en jQuery, sería así:

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

clipboard.js es una buena utilidad que permite copiar texto o datos HTML al portapapeles sin usar Flash. 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 .

Editar el 15 de enero de 2016: la respuesta principal se editó hoy para hacer referencia a la misma API en mi respuesta publicada en agosto de 2015. El texto anterior instruía a los usuarios a usar ZeroClipboard. Solo quiero dejar en claro que no saqué esto de la respuesta de jfriend00, sino al revés.

Simplicidad es la máxima sofisticación.
Si no desea que el texto a copiar sea visible:

jQuery:

$('button.copyButton').click(function(){
    $(this).siblings('input.linkToCopy').select();      
    document.execCommand("copy");
});

HTML:

<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;" />

Con saltos de línea (extensión de la respuesta de Álvaro Montoro)

var ClipboardHelper = {

    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();
    }
};

ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());

Puede usar este código para copiar el valor de entrada en la página en el Portapapeles haciendo clic en un botón

Esto es HTML

<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
    Copy Input Value
</button>

Luego, para este html, debemos usar este código JQuery

function copyToClipboard(element) {
    $(element).select();
    document.execCommand("copy");
}

Esta es la solución más simple para esta pregunta.

Un enfoque aún mejor sin flash o cualquier otro requisito es clipboard.js . Todo lo que necesita hacer es agregar data-clipboard-target="#toCopyElement"cualquier botón, inicializarlo new Clipboard('.btn');y copiará el contenido de DOM con id toCopyElemental portapapeles. Este es un fragmento que copia el texto proporcionado en su pregunta a través de un enlace.

Sin embargo, una limitación es que no funciona en safari, pero funciona en todos los demás navegadores, incluidos los navegadores móviles, ya que no utiliza flash

$(function(){
  new Clipboard('.copy-text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        function copy()
        {
            try
            {
                $('#txt').select();
                document.execCommand('copy');
            }
            catch(e)
            {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <h4 align="center">Copy your code</h4>
    <textarea id="txt" style="width:100%;height:300px;"></textarea>
    <br /><br /><br />
    <div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>

<div class="form-group">
    <label class="font-normal MyText">MyText to copy</label>&nbsp;
    <button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>


$(".btnCopy").click(function () {
        var element = $(this).attr("data");
        copyToClipboard($('.' + element));
  });

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Es muy importante que el campo de entrada no tenga display: none. El navegador no seleccionará el texto y, por lo tanto, no se copiará. Use opacity: 0con un ancho de 0px para solucionar el problema.

Es un método más simple para copiar el contenido.

 <div id="content"> Lorepm ispum </div>
 <button class="copy" title="content">Copy Sorce</button>

function SelectContent(element) {
                        var doc = document
                            , text = doc.getElementById(element)
                            , range, selection
                        ;    
                        if (doc.body.createTextRange) {
                            range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            selection = window.getSelection();        
                            range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);

                        }
                         document.execCommand('Copy');
                    }
                    $(".copy").click(function(){

                         SelectContent( $(this).attr('title'));
                    });

Solución simple jQuery.

Debe ser activado por el clic del usuario.

$("<textarea/>").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();

¡puedes usar esta lib para realizar fácilmente el objetivo de la copia!

https://clipboardjs.com/

Copiar texto al portapapeles no debería ser difícil. No debería requerir docenas de pasos para configurar o cientos de KB para cargar. Pero, sobre todo, no debería depender de Flash ni de ningún marco hinchado.

Por eso existe clipboard.js.

o

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

La biblioteca ZeroClipboard proporciona una manera fácil de copiar texto en el portapapeles utilizando una película Adobe Flash invisible y una interfaz JavaScript.

El texto a copiar está en la entrada de texto, como: <input type="text" id="copyText" name="copyText"> y, al hacer clic en el botón, el texto sobre el texto debe copiarse en el portapapeles, por lo que el botón es como: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Su secuencia de comandos debería ser como:

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

</script>

Para archivos CDN

• (zeroclipboard.swf) :
• (zeroclipboard.js) :

nota : ZeroClipboard.swfy ZeroClipboard.js"el archivo debe estar en la misma carpeta que el archivo que usa esta funcionalidad, O debe incluirlo como lo incluimos <script src=""></script>en nuestras páginas.

La mayoría de las respuestas propuestas crean un elemento (s) de entrada oculto temporal adicional. Debido a que la mayoría de los navegadores hoy en día admiten la edición de contenido div, propongo una solución que no crea elementos ocultos, conserva el formato de texto y utiliza JavaScript puro o la biblioteca jQuery.

Aquí hay una implementación esqueleto minimalista que utiliza la menor cantidad de líneas de códigos que se me ocurren:

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text Copied to Clipboard Using Pure Javascript");
});

function copyUsingPureJS(element_id) {
  element_id.setAttribute("contentEditable", true);
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
  element_id.focus();
  document.execCommand("copy");
  element_id.removeAttribute("contentEditable");
  
}

//Jquery:
$(document).ready(function() {
  $("#copyUsingJquery").click(function() {
    copyUsingJquery("#copyTarget");
  });
 

  function copyUsingJquery(element_id) {
    $(element_id).attr("contenteditable", true)
      .select()
      .on("focus", function() {
        document.execCommand('selectAll', false, null)
      })
      .focus()
    document.execCommand("Copy");
    $(element_id).removeAttr("contenteditable");
     alert("Text Copied to Clipboard Using jQuery");
  }
});

#copyTarget {
  width: 400px;
  height: 400px;
  border: 1px groove gray;
  color: navy;
  text-align: center;
  box-shadow: 0 4px 8px 0 gray;
}

#copyTarget h1 {
  color: blue;
}

#copyTarget h2 {
  color: red;
}

#copyTarget h3 {
  color: green;
}

#copyTarget h4 {
  color: cyan;
}

#copyTarget h5 {
  color: brown;
}

#copyTarget h6 {
  color: teal;
}

#pasteTarget {
  width: 400px;
  height: 400px;
  border: 1px inset skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <strong>Preserve <em>formatting</em></strong>
  <br/>
</div>

<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

La biblioteca Clipboard-polyfill es un polyfill para la moderna API de portapapeles asíncrona basada en Promise.

instalar en CLI:

npm install clipboard-polyfill 

importar como portapapeles en archivo JS

window.clipboard = require('clipboard-polyfill');

ejemplo

Lo estoy usando en un paquete require("babel-polyfill");y lo probé en Chrome 67. Todo bien para la producción.

código html aquí

    <input id="result" style="width:300px"/>some example text
    <button onclick="copyToClipboard('result')">Copy P1</button>
    <input type="text" style="width:400px" placeholder="Paste here for test" />

CÓDIGO JS:

     function copyToClipboard(elementId) {

                      // Create a "hidden" input
                      var aux = document.createElement("input");

                      aux.setAttribute("value", document.getElementById(elementId).value);
                      // Append it to the body
                      document.body.appendChild(aux);
                      // Highlight its content
                      aux.select();
                      // Copy the highlighted text
                      document.execCommand("copy");
                      // Remove it from the body
                      document.body.removeChild(aux);
                    }

puede copiar un texto individual aparte del texto de un elemento HTML.

        var copyToClipboard = function (text) {
            var $txt = $('<textarea />');

            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');

            $txt.select();

            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };

JS puro, sin onclick en línea, para clases emparejadas "contenido - botón de copia". Sería más cómodo, si tienes muchos elementos)

(function(){

/* Creating textarea only once, but not each time */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

let content = document.querySelectorAll('.js-content');
let copy    = document.querySelectorAll('.js-copy');

for( let i = 0; i < copy.length; i++ ){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    /* because the classes are paired, we can use the [i] index from the clicked button,
    to get the required text block */
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";

    /* decorative part */
    this.innerHTML = 'Cop<span style="color: red;">ied</span>';
    /* arrow function doesn't modify 'this', here it's still the clicked button */
    setTimeout( () => this.innerHTML = "Copy", 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Soporte de navegador antiguo:

(function(){

var area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

var content = document.querySelectorAll('.js-content');
var copy    = document.querySelectorAll('.js-copy');

for( var i = 0; i < copy.length; i++ ){
  copyOnClick(i);
}

function copyOnClick(i){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";
    
    var t = this;
    t.innerHTML = 'Cop<span style="color: red;">ied</span>';
    setTimeout( function(){
      t.innerHTML = "Copy"
    }, 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Ambos funcionarán como un encanto :),

JAVASCRIPT:

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

También en html,

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY: https://paulund.co.uk/jquery-copy-clipboard