Cómo copiar texto de un div al portapapeles

Aquí está mi código para cuando el usuario hace clic en este botón:

<button id="button1">Click to copy</button>

¿Cómo copio el texto dentro de este div?

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

Apr 15 '16 13:04 Alex

Probé la solución propuesta anteriormente. Pero no era suficiente para varios navegadores. Realmente necesitaba que ie11 funcionara. Después de intentarlo llegué a:

    <html>
        <body>
            <div id="a" onclick="copyDivToClipboard()"> Click to copy </div>
            <script>
                function copyDivToClipboard() {
                    var range = document.createRange();
                    range.selectNode(document.getElementById("a"));
                    window.getSelection().removeAllRanges(); // clear current selection
                    window.getSelection().addRange(range); // to select text
                    document.execCommand("copy");
                    window.getSelection().removeAllRanges();// to deselect
                }
            </script>
        </body>
    </html>

Probado con Firefox 64, Chrome 71, Opera 57, ie11(11.472.17134.0), edge( EdgeHTML 17.17134)

Actualización 27 de marzo de 2019.

Por alguna razón document.createRange()no funcionó antes con ie11. Pero ahora devuelve correctamente un objeto Range. Entonces es mejor usar eso, en lugar de document.getSelection().getRangeAt(0).

Dec 29 '2017 09:12 J. García

Ambos ejemplos funcionan a las mil maravillas :)

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 has been copied, now paste in the text-area")
  }
}

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>
<br /><br />
<div id="div1">Text To Copy </div>
<br />
<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

Expandir fragmento

JQUERY (se basa en Adobe Flash): https://paulund.co.uk/jquery-copy-to-clipboard

Apr 15 '2016 06:04 Eldho NewAge

La respuesta aceptada no funciona cuando tiene varios elementos para copiar y cada uno con un botón separado "copiar al portapapeles". Después de hacer clic en un botón, los demás no funcionarán.

Para que funcionen, agregué algo de código a la función de la respuesta aceptada para borrar las selecciones de texto antes de hacer una nueva:

function CopyToClipboard(containerid) {
    if (window.getSelection) {
        if (window.getSelection().empty) { // Chrome
            window.getSelection().empty();
        } else if (window.getSelection().removeAllRanges) { // Firefox
            window.getSelection().removeAllRanges();
        }
    } else if (document.selection) { // IE?
        document.selection.empty();
    }

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

Jul 10 '2018 08:07 romin21