There is at least one way to achieve this without using Flash: using thecopy . This command will copy to the clipboard the text that is selected on the page at the time it is executed.

So you can create a small function that:

1. Create a temporary text field (which will not be visible).
2. Assign the content of the element to be copied to the value of the text field.
3. Select the content of the text field.
4. Run the copy: command document.execCommand("copy").
5. Destroy/Clear the temporary field.

Then the content of the selected item will be on the clipboard. The code would be like this:

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

}

The main problem with this solution is that not all browsers support this command , although it can be used in the main ones from:

• Chrome 43
• internet explorer 10
• Firefox 41

A working demo of the code:

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

An equivalent version can also be created using 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" />

Which works similarly to the example above, although some bugs have been reported in Safari for Mac and Chrome 64-bit (see the comments in the original source link for more details).

Source: Original answer on StackOverflow site .

EXTENSION: COPY KEEPING STYLES

In another question on StackOverflow in Spanish , a user commented that the formatting/styles of the text were not copied. This is because in the code above it uses input textto copy the content of the element, so the HTML code is "lost" (it is interpreted literally instead of as HTML). If instead of using an inputwe use an diveditable, the formatting is not lost and can be copied/pasted with styles:

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>

Just to complement you could take a look at the clipboard.js library , which as @Alvaro mentions makes use of execCommand so according to the library page it says that it works in Chrome 42+, Firefox 41+, IE 9+ and Opera 29+.

It doesn't work for Safari, but when you try it on an iPad, it selects the text from inputwhile showing you the native option to copy it.

The difference is in the ease of use , since with little time and effort you can copy the content you want, the following code copies the content of a input, but you can also copy/cut the content of another element ( button, 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>

it will be the same as the other guy above but instead of an input a text area so that the indentation respects you if you have more than one line

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

}

Hello I was wondering if it is possible to encapsulate what one wants to copy.

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>
<div id="p1">
    <p>Soy el primer párrafo</p>
    <p>Soy el segundo párrafo</p>
    <div>tag,tag,tag,tag</div>
</div>

    <button onclick="copyToClipboard('#p1')">Copiar P1</button>
 
    <br/>
    <br/>
    <input type="text" placeholder="Pega aquí para probar" />