Làm cách nào để sao chép vào clipboard trong HTML5 mà không cần sử dụng đèn flash?

Question

Tôi muốn sử dụng chức năng sao chép sang clipboard trong HTML5, nhưng không sử dụng flash. Có thể không? Làm sao?

tôi cố gắng thực hiện một bản sao-to-clipboad chức năng với JavaScript, nhưng nó không làm việc:

function Copytoclipboard() { 
    var body = document.body, 
     range, sel; 
    if (document.createRange && window.getSelection) { 
     range = document.createRange(); 
     sel = window.getSelection(); 
     sel.removeAllRanges(); 
     try { 
      range.selectNodeContents(el); 
      sel.addRange(range); 
      document.execCommand('Copy'); 
     } catch (e) { 
      range.selectNode(el); 
      sel.addRange(range); 
      document.execCommand('Copy'); 
     } 
    } else if (body.createTextRange) { 
     range = body.createTextRange(); 
     range.moveToElementText(el); 
     range.select(); 
     range.execCommand('Copy'); 
    } 
} 

Answer 1

Bạn có thể sử dụng HTML5 clipboard apihttp://www.htmlgoodies.com/html5/other/working-with-clipboard-apis-in-html5-web-apps.html#fbid=eh9tM7GHJWF

Nhưng đừng lưu ý rằng không hỗ trợ tất cả các trình duyệt đầy đủ kể từ bây giờ: http://caniuse.com/#feat=clipboard

Answer 2

Nó không hoạt động vì nó yêu cầu tương tác của người dùng như nhấp chuột. Nếu không, document.execCommand sẽ không hoạt động. Bạn cũng có thể muốn kiểm tra clipboard.js, đó là thư viện siêu dễ dàng để sao chép văn bản vào khay nhớ tạm mà không yêu cầu Flash.

Answer 3

CẬP NHẬT: Giải pháp này cũng hoạt động trong Safari.

Tôi cho rằng chưa có giải pháp trình duyệt đa flash nào cho điều này. Dưới đây là một giải pháp mà làm việc trong ít nhất là phiên bản mới nhất của Chrome, Firefox, và Edge:

function copyText(text){ 
 
    function selectElementText(element) { 
 
    if (document.selection) { 
 
     var range = document.body.createTextRange(); 
 
     range.moveToElementText(element); 
 
     range.select(); 
 
    } else if (window.getSelection) { 
 
     var range = document.createRange(); 
 
     range.selectNode(element); 
 
     window.getSelection().removeAllRanges(); 
 
     window.getSelection().addRange(range); 
 
    } 
 
    } 
 
    var element = document.createElement('DIV'); 
 
    element.textContent = text; 
 
    document.body.appendChild(element); 
 
    selectElementText(element); 
 
    document.execCommand('copy'); 
 
    element.remove(); 
 
} 
 

 

 
var txt = document.getElementById('txt'); 
 
var btn = document.getElementById('btn'); 
 
btn.addEventListener('click', function(){ 
 
    copyText(txt.value); 
 
})

<input id="txt" /> 
 
<button id="btn">Copy To Clipboard</button>

Lưu ý: Cố gắng sử dụng giải pháp này để sao chép một chuỗi rỗng hoặc một chuỗi đó là chỉ khoảng trắng sẽ không hoạt động.

Answer 4

Nếu bạn không quan tâm rằng nội dung của trường văn bản sẽ được chọn trước khi sao chép, đây là giải pháp hai dòng hoạt động ít nhất trong Chrome 56 và Edge, nhưng tôi đặt cược nó hoạt động trên các trình duyệt khác .

function clickListener() { 
 
    document.getElementById('password').select(); 
 
    document.execCommand('copy'); 
 
} 
 

 
document.getElementById('copy_btn').addEventListener('click', clickListener);

<input id=password value="test"> 
 
<button id=copy_btn>Copy</button>

https://jsfiddle.net/uwd0rm08/

Answer 5

Chức năng chèn văn bản vào clipboard:

function copyStringToClipboard (string) { 
    function handler (event){ 
     event.clipboardData.setData('text/plain', string); 
     event.preventDefault(); 
     document.removeEventListener('copy', handler, true); 
    } 

    document.addEventListener('copy', handler, true); 
    document.execCommand('copy'); 
}