Copiar el contenido de un elemento al portapapeles usando JavaScript

Question

¿Cómo puedo copiar el contenido de un div (o de cualquier elemento) al portapapeles usando exclusivamente JavaScript/jQuery sin necesidad de usar Flash?

Por ejemplo, si tengo este código:

<p id="mi_parrafo">
  Texto que quiero copiar
</p>
<button>Copiar al portapapeles</button>

¿Qué debo hacer para que, después de pulsar el botón, cuando pulse Ctr + V se pegue el contenido dentro de la etiqueta marcada como #mi_parrafo?

Answer 1

Hay al menos una manera de conseguir esto sin usar Flash: utilizando el comando copy. Ese comando copiará al portapapeles el texto que esté seleccionado en la página en el momento de ejecutarse.

Así se puede crear una pequeña función que:

1. Cree un campo de texto temporal (que no será visible).
2. Asigne el contenido del elemento que se quiere copiar al valor del campo de texto.
3. Seleccione el contenido del campo de texto.
4. Ejecute el comando copy: document.execCommand("copy").
5. Destruya/Borre el campo temporal.

Entonces el contenido del elemento seleccionado estará en el portapapeles. El código sería así:

function copiarAlPortapapeles(id_elemento) {

  // Crea un campo de texto "oculto"
  var aux = document.createElement("input");

  // Asigna el contenido del elemento especificado al valor del campo
  aux.setAttribute("value", document.getElementById(id_elemento).innerHTML);

  // Añade el campo a la página
  document.body.appendChild(aux);

  // Selecciona el contenido del campo
  aux.select();

  // Copia el texto seleccionado
  document.execCommand("copy");

  // Elimina el campo de la página
  document.body.removeChild(aux);

}

El principal problema de esta solución es que no todos los navegadores soportan este comando, aunque sí que se puede utilizar en los principales a partir de:

• Chrome 43
• Internet Explorer 10
• Firefox 41

Una demo del código en funcionamiento:

function copiarAlPortapapeles(id_elemento) {
  var aux = document.createElement("input");
  aux.setAttribute("value", document.getElementById(id_elemento).innerHTML);
  document.body.appendChild(aux);
  aux.select();
  document.execCommand("copy");
  document.body.removeChild(aux);
}

<p id="p1">P1: Soy el primer párrafo</p>
<p id="p2">P2: Soy el segundo párrafo</p>
<button onclick="copiarAlPortapapeles('p1')">Copiar P1</button>
<button onclick="copiarAlPortapapeles('p2')">Copiar P2</button>
<br/><br/>
<input type="text" placeholder="Pega aquí para probar" />

---

También se puede crear una versión equivalente usando jQuery:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="p1">P1: Soy el primer párrafo</p>
<p id="p2">P2: Soy el segundo párrafo</p>
<button onclick="copyToClipboard('#p1')">Copiar P1</button>
<button onclick="copyToClipboard('#p2')">Copiar P2</button>
<br/>
<br/>
<input type="text" placeholder="Pega aquí para probar" />

Que funciona de manera similar al ejemplo anterior, aunque se han reportado algunos errores en Safari para Mac y Chrome 64-bit (ver los comentarios en en enlace de la fuente original para más datos).

---

Fuente: respuesta original en el sitio StackOverflow.

---

AMPLIACIÓN: COPIAR MANTENIENDO LOS ESTILOS

En otra pregunta en StackOverflow en Español, un usuario comentaba que no se copiaba el formato/estilos del texto. Esto se debe a que en el código de arriba usa input text para copiar el contenido del elemento, por lo que el código HTML se "pierde" (se interpreta de forma literal en lugar de como HTML). Si en lugar de usar un input usamos un div editable, el formato no se pierde y se puede copiar/pegar con estilos:

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

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

<p id="demo"><b>Caso con formato.</b></p>
<button onclick="ejecutar('demo')">Copiar</button> 
<br/>
<div id="destino" contentEditable="true">
</div>

Answer 2

Solo para complementar podrías echarle un ojo a la librería clipboard.js, la cual como @Alvaro menciona hace uso de execCommand por lo que según la página de la librería dice que funciona en Chrome 42+, Firefox 41+, IE 9+ y Opera 29+.

Para Safari no funciona, pero al probarlo en un iPad te selecciona el texto del input al mismo tiempo que te muestra la opción nativa para copiarlo.

La diferencia está en la facilidad de uso, ya que con poco tiempo y esfuerzo logras copiar el contenido que quieres, el siguiente código copia el contenido de un input, pero también se puede copiar/cortar el contenido de otro elemento (boton, div, etc).

var clipboard = new Clipboard('.btn');

<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.3/dist/clipboard.min.js"></script>
<!-- Objetivo -->
<input id="foo" value="Texto a copiar">

<!-- Disparador -->
<button class="btn" data-clipboard-target="#foo">
  Copiar al portapapeles
</button>

Answer 3

va a ser el mismo que tiene el otro cuate de arriba pero en vez de un input un text area para que te respete el indentado si tuvieras mas de una linea

function copiarAlPortapapeles(id_elemento) {

  // Crea un campo de texto "oculto", este por un textarea

  var aux = document.createElement("textarea");

  // Asigna el contenido del elemento especificado al valor del campo
  // este para vaciar el contenido

  aux.innerHTML = document.getElementById(id_elemento).innerHTML

  // Añade el campo a la página
  document.body.appendChild(aux);

  // Selecciona el contenido del campo
  aux.select();

  // Copia el texto seleccionado
  document.execCommand("copy");

  // Elimina el campo de la página
  document.body.removeChild(aux);

}