On click - copy to clipboard

Question

<p id="p1"> ...here is a lot of text (html) mixed with php... </p> <button onclick="copyToClipboard('#p1')">Copy to clipboard</button> ------ JS function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).text()).select(); document.execCommand("copy"); $temp.remove(); } 

---

When I click on the button, the results are copied, but without bold, underline, lines and other formatting elements. How can I copy it as it displays by default?

Answer 1

Assuming all your styles are inline, you need to get the html of the element, not the text. Sort of:

 function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).html()).select(); //Note the use of html() rather than text() document.execCommand("copy"); $temp.remove(); } 

Edit based on comments:

To copy formatting to something like the body of a Gmail message or Word document, you must actually select an element as a range. When you paste the html content into a text box, you are actually copying the raw text. You want to do something like this:

 function copyToClipboard(element) { //Note, element should be a node rather than a jQuery instance. var selection = window.getSelection(), //Get the window selection selectData = document.createRange(); //Create a range selection.removeAllRanges(); //Clear any currently selected text. selectData.selectNodeContents(element); //Add the desired element to the range you want to select. selection.addRange(selectData); //Highlight the element (this is the same as dragging your cursor over an element) var copyResult = document.execCommand("copy"); //Execute the copy. if(copyResult) //was the copy successful? selection.removeAllRanges(); //Clear the highlight. else alert("Your browser does not support clipboard commands, press ctrl+c"); } 

Answer 2

 function copyToClipboard(element) { var $temp = $("<input>"); $("body").append($temp); $temp.val($(element).html()).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"> ...here is a lot of <b>text</b> (html) mixed with php... </p> <button onclick="copyToClipboard('#p1')">Copy to clipboard</button> 

Answer 3

Try html () instead of text ()

 $temp.val($(element).html()).select();