Khi được nhấp - sao chép vào 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(); 
} 

---

Khi tôi bấm vào nút, kết quả được sao chép nhưng không đậm, gạch dưới, hàng và những thứ định dạng khác. Làm cách nào để sao chép nó như được hiển thị theo mặc định?

Answer 1

Giả sử tất cả các phong cách của bạn là nội tuyến, bạn cần phải nhận được html của phần tử chứ không phải là văn bản. Một cái gì đó như:

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

Chỉnh sửa dựa trên nhận xét:

Để sao chép định dạng cho một cái gì đó giống như một nội dung thư Gmail hoặc một tài liệu Word, bạn phải thực sự chọn phần tử như một loạt. Khi bạn chèn nội dung html vào một vùng văn bản, bạn thực sự đang sao chép văn bản thô. Bạn muốn làm một cái gì đó như thế này:

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

Thử html() thay vì văn bản()

$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>