Haga clic en el botón copiar al portapapeles usando jQuery


434

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



Trello tiene una manera inteligente de hacer esto sin flash: stackoverflow.com/questions/17527870/…
Paul Schreiber

Consulte esto, stackoverflow.com/questions/22581345/… obtuvo la solución esperada usando JavaScript puro
Vignesh Chinnaiyan

@MichaelScheper: algunos usuarios son lo suficientemente inteligentes como para darse cuenta de que mi comentario, y la mayoría de las respuestas aquí, se publicaron hace más de cuatro años, cuando zeroclipboard, que se basa en una pequeña aplicación flash, era la única opción viable para varios navegadores. trabajar con el portapapeles y la solución goto. Hoy en día, todos los navegadores modernos admiten esto de forma nativa, por lo que ya no es un problema, pero ese no fue el caso en 2014
adeneo

@adeneo: Claro, pero no todos los usuarios son tan "inteligentes", y su comentario todavía tiene dos votos a favor.
Michael Scheper

Respuestas:


484

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:


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


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.


1
clipboard.js se acaba de agregar a esta publicación editada. Es una buena utilidad que incluí como respuesta a esta pregunta en agosto de 2015.
un codificador

1
@acoder: el soporte del portapapeles ha cambiado regularmente. Por ejemplo, Firefox recientemente (finales de 2015) habilitado document.execCommand("copy")en suficientes circunstancias para confiar en su uso para esto. Por lo tanto, estoy tratando de mantener mi respuesta actualizada (que fue originalmente creada hace casi 2 años). Todavía no tenemos una solución confiable para Safari que no sea preseleccionar el texto y decirle al usuario que presione manualmente Ctrl + C, pero al menos se está avanzando en otro lugar.
jfriend00

1
Aquí hay un enlace de soporte para las API del Portapapeles: caniuse.com/#feat=clipboard
L84

2
Para su información, según este conjunto de notas de la versión de Safari , parece que Safari 10 ahora es compatible, document.execCommand("copy")por lo que este código debería funcionar en Safari 10.
jfriend00

1
@sebastiangodelet - dominio público.
jfriend00

641

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>


55
extraño ... aquí funciona, pero no puedo trabajarlo localmente 0o jquery-1.11.3 Chrome 43.0.2357.130 (64 bits)
madzohan

2
@madzohan Ok, pude reproducir el problema. Es extraño porque solo pude reproducirlo en local (file: //) en Chrome de 64 bits. También encontré una solución rápida que funciona para mí: usar JavaScript simple en lugar de jQuery. Actualizaré la respuesta con ese código. Por favor, compruébalo y avísame si te funciona.
Alvaro Montoro

1
FWIW - document.execCommand ("copia") devuelve un booleano (IE, Chrome, Safari) que indica si la copia se realizó correctamente. Podría usarse para mostrar un mensaje de error en caso de falla. Firefox lanza una excepción en caso de falla (al menos en v39), que requiere un try / catch para manejar el error.
PointZeroTwo

3
Esto no funcionó para mí hasta que me aseguré de que aux estuviera visible en la página agregando las siguientes líneas: aux.style.position = "fixed"; aux.style.top = 0;arriba de la appendChildllamada.
ariscris

77
La implementación original de jQuery no puede preservar los saltos de línea, porque está utilizando un elemento INPUT. Usar una TEXTAREA en su lugar resuelve esto.
thomasfuchs

37

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.


clipboard-js - ha quedado en desuso Mensaje del autor: migre a github.com/lgarron/clipboard-polyfill
Yevgeniy Afanasyev

26

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;" />

no parece funcionar en ipad, no lo he probado pero hay una solución sugerida aquí: stackoverflow.com/a/34046084
user1063287

Eso funcionó para mí, pero si el texto que se copiará contiene retornos de carro, entonces también puede usar un área de texto.
Alex

13

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

9

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.


8

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>


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

1
Esto solo se puede usar para Textarea y textbox.
Vignesh Chinnaiyan

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

Buena solución. ¿Quizás agregar .addClass("hidden")a la <input>etiqueta para que nunca aparezca en el navegador?
Roland

5

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.


4

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

4

Solución simple jQuery.

Debe ser activado por el clic del usuario.

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

3

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


2

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

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.


66
Flash sigue el camino de Geocities.
un codificador

2

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>


2

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.


1

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

cambie esto: .value a .innerHTML
Omar N Shamali

1

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

0

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:


-1

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.