- ボタンIをクリックすると

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

---

をクリップボードにコピー、結果はなく、太字、下線、行およびその他の書式のものなしでコピーされます。 デフォルトで表示されるので、どのようにコピーできますか？すべてのあなたのスタイルを想定し

Answer 1

がインラインあり、あなたは要素のHTMLではなくテキストを取得する必要があります。コメントに基づいて

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

編集：ような何か

Gmailのメッセージ本文またはあなたが実際に範囲としての要素を選択する必要がWord文書のようなものに書式をコピーします。 HTMLコンテンツをテキストエリアに挿入すると、生のテキストが実際にコピーされます。あなたは次のようなことをしたいと思っています：

Answer 2

てみhtmlの（）テキストの代わりに（）

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

Answer 3

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>