Cómo copiar texto de un div al portapapeles

Esta pregunta se puede tratar de variadas formas, por lo tanto te dejamos la resolución más completa en nuestra opinión.

Solución:

Probé la solución propuesta anteriormente. Pero no fue lo suficientemente multi-navegador. Realmente necesitaba ie11 para trabajar. Después de intentar llegué a:

    
        
            
 Click to copy 
            
        
    

Probado con Firefox 64, Chrome 71, Opera 57, ie11 (11.472.17134.0), borde (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. Así que es mejor usar eso, en lugar de document.getSelection().getRangeAt(0).

Ambos ejemplos funcionan a las mil maravillas 🙂

1. 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")
     
   

   Click to copy
   
   
   
   Text To Copy 
   
   
   

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

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

Para que funcionen, agregué un 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");
    

Puedes añadir valor a nuestra información aportando tu experiencia en los comentarios.

---

---

Utiliza Nuestro Buscador