Cách tự động nối văn bản vào văn bản được sao chép bằng JavaScript

Question

Trong JavaScript, cách bạn có thể chọn văn bản trên trang web, sao chép văn bản (bằng Control + C, Command + C hoặc Edit Copy) và có JavaScript nối thêm một hoặc hai dòng clipboard nên khi người dùng dán, nội dung họ đã sao chép cũng được hiển thị cũng như dòng phụ?

Ngoài ra, điều này chỉ có thể thực hiện trong một số trang nhất định là <div> của trang web? Nếu vậy, làm thế nào?

Answer 1

Bạn có thể sử dụng kết hợp execCommand("Copy") và execCommand("Paste") để thực hiện những gì bạn muốn.

Điều này sẽ giúp bạn ra ngoài:

http://www.geekpedia.com/tutorial126_Clipboard-cut-copy-and-paste-with-JavaScript.html

Answer 2

Tôi đã xem qua này trên trang web faqs.org [1] và tò mò quá. Họ sử dụng một số javascript từ tynt.com. Tôi cũng tìm thấy một câu trả lời hỏi-metafilter [2] trỏ đến một javascript khác nhau. Họ nên là điểm khởi đầu tốt. Tôi đã không làm việc nó ra được nêu ra bản thân mình nhưng tôi hy vọng bạn có thể đính kèm người nghe sự kiện để chỉ div trong câu hỏi.

1. http://www.faqs.org/faqs/tv/sat-night-live/deep-thoughts/
   • http://ask.metafilter.com/133804/How-does-HuffPo-append-URLs-to-copied-text

Answer 3

tôi đã phát triển một kịch bản mà thực hiện điều này (và here's các bài viết trên blog về vấn đề này):

<script> 
$("body").bind('copy', function (e) { 
    if (typeof window.getSelection == "undefined") return; //IE8 or earlier... 

    var body_element = document.getElementsByTagName('body')[0]; 
    var selection = window.getSelection(); 

    //if the selection is short let's not annoy our users 
    if (("" + selection).length < 30) return; 

    //create a div outside of the visible area 
    var newdiv = document.createElement('div'); 
    newdiv.style.position = 'absolute'; 
    newdiv.style.left = '-99999px'; 
    body_element.appendChild(newdiv); 
    newdiv.appendChild(selection.getRangeAt(0).cloneContents()); 

    //we need a <pre> tag workaround 
    //otherwise the text inside "pre" loses all the line breaks! 
    if (selection.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") { 
     newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>"; 
    } 

    newdiv.innerHTML += "<br /><br />Read more at: <a href='" 
     + document.location.href + "'>" 
     + document.location.href + "</a> &copy; MySite.com"; 

    selection.selectAllChildren(newdiv); 
    window.setTimeout(function() { body_element.removeChild(newdiv); }, 200); 
}); 
</script>