Sử dụng execCommand (Javascript) để sao chép văn bản ẩn vào clipboard

Question

Tôi đang cố sao chép vào khay nhớ tạm mà không sử dụng Flash, tôi dự định quay trở lại Flash với việc sử dụng ZeroClipboard nếu trình duyệt không tương thích với phương pháp javascript.

Tôi có một người biết lắng nghe onClick cho nút trông giống như:

$(buttonWhereActionWillBeTriggered).click(function(){ 
    var copyDiv = document.getElementById(inputContainingTextToBeCopied); 
    copyDiv.focus(); 
    document.execCommand('SelectAll'); 
    document.execCommand("Copy", false, null); 
} 

và một lĩnh vực đầu vào như sau:

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo"/> 

này hiện đang hoạt động như mong đợi nhưng thiết kế đòi hỏi rằng lĩnh vực này chứa văn bản cần sao chép là vô hình. Tôi đã thử cả hai thiết type="hidden" và style="display: none" không phải trong đó đã thành công. Cả hai kết quả là nút chọn toàn bộ trang và sao chép toàn bộ nội dung vào khay nhớ tạm của người dùng.
Tôi tương đối tự tin không phải là nguyên nhân dựa trên trình duyệt mà chỉ ở trong trường hợp đó, tôi đang thử nghiệm trên Chrome (Phiên bản 43.0.2357.134 (64-bit)) trên Mac OS X 10.10.4.

Có cách nào mà tôi có thể duy trì các chức năng của khi < input> là có thể nhìn thấy trong khi giấu nó? hoặc nếu không phải là một tuyến đường thay thế tôi có thể đi?

---

Tôi biết các câu hỏi tương tự, không có câu hỏi nào giải quyết được vấn đề của tôi, quá cũ, không thực sự sử dụng Javascript hoặc không phù hợp với kịch bản cụ thể. Here's a good answer cho bất cứ ai có vấn đề tương tự, ít cụ thể hơn.

Answer 1

--UPDATE--

Document.execCommand()

[1] Trước khi Firefox 41, khả năng vào clipboard cần phải được kích hoạt trong file user.js sở thích. Xem Hướng dẫn ngắn gọn để Mozilla preferences for more information. Nếu lệnh không được hỗ trợ hoặc được bật, execCommand đã nâng cao một ngoại lệ thay vì trả lại false.In Firefox 41 và sau đó, khả năng vào clipboard được kích hoạt theo mặc định trong bất cứ xử lý sự kiện mà có thể bật lên một cửa sổ (kịch bản bán tin cậy).

Kể từ Firefox version 41 Document.execCommand() hiện đang hoạt động. Vì vậy, không cần phải sử dụng một dự phòng nữa.

---

Bởi vì trình duyệt dường như hành xử khác nhau khi nói đến việc tiếp cận vào clipboard, nó đã cho tôi một thời gian để có được đầu của tôi xung quanh nó.

Nó khá giống với giải pháp của bạn, nhưng sự khác biệt là tạo một phần tử tạm thời và điền nó với đầu vào value. Bằng cách đó, chúng tôi có thể giữ thuộc tính display của thiết bị đầu vào được đặt thành none.

Ngoài ra còn có một giải pháp thay thế cho IE sử dụng window.clipboardData.

Firefox sẽ không cho phép tôi truy cập vào clipboard. Vì vậy, tôi đã phải thêm một prompt để cho phép người dùng sao chép giá trị đầu vào theo cách thủ công. Chắc chắn một prompt là xấu xí, nhưng bạn chỉ có thể sử dụng một cửa sổ giống như phương thức, mà sẽ làm như vậy.

Vì đây có vẻ là một điều có nhiều nút, tôi đang trên Win7 (64 bit) và thử nghiệm trong

Chrome - Phiên bản 43.0.2357.134 m

IE - Phiên bản 11.0. 9600.17914

và Firefox không liên quan, vì nó sẽ không cho phép tôi truy cập vào nó.

var copyBtn = $("#copy-btn"), 
 
    input  = $("#copy-me"); 
 

 
function copyToClipboardFF(text) { 
 
    window.prompt ("Copy to clipboard: Ctrl C, Enter", text); 
 
} 
 

 
function copyToClipboard() { 
 
    var success = true, 
 
     range  = document.createRange(), 
 
     selection; 
 

 
    // For IE. 
 
    if (window.clipboardData) { 
 
    window.clipboardData.setData("Text", input.val());   
 
    } else { 
 
    // Create a temporary element off screen. 
 
    var tmpElem = $('<div>'); 
 
    tmpElem.css({ 
 
     position: "absolute", 
 
     left:  "-1000px", 
 
     top:  "-1000px", 
 
    }); 
 
    // Add the input value to the temp element. 
 
    tmpElem.text(input.val()); 
 
    $("body").append(tmpElem); 
 
    // Select temp element. 
 
    range.selectNodeContents(tmpElem.get(0)); 
 
    selection = window.getSelection(); 
 
    selection.removeAllRanges(); 
 
    selection.addRange (range); 
 
    // Lets copy. 
 
    try { 
 
     success = document.execCommand ("copy", false, null); 
 
    } 
 
    catch (e) { 
 
     copyToClipboardFF(input.val()); 
 
    } 
 
    if (success) { 
 
     alert ("The text is on the clipboard, try to paste it!"); 
 
     // remove temp element. 
 
     tmpElem.remove(); 
 
    } 
 
    } 
 
} 
 

 
copyBtn.on('click', copyToClipboard);

#copy-me { 
 
    display:none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" name="Element To Be Copied" id="copy-me" value="foo loves bar"/> 
 
<button id="copy-btn">Copy</button><br/><br/> 
 
<textarea placeholder="paste here"></textarea>

Answer 2

Nhờ sự giúp đỡ của @DavidDomain, tôi tìm thấy một cách tiếp cận hơi hacky, nhưng chức năng.

Thứ nhất, tôi chuyển cách đầu vào tắt màn hình và sửa đổi một số đặc tính, kết quả này:

<input type="text" name="Element To Be Copied" id="inputContainingTextToBeCopied" value="foo" style="display:none; position: relative; left: -10000px;"/> 

display: none đã được bổ sung sau khi sửa đổi sau đây với js

Sau đó, nhận xét từ @Pokkanome cho phép tôi sửa đổi chức năng onClick như vậy:

$(buttonWhereActionWillBeTriggered).click(function(){ 
    var copyDiv = document.getElementById(inputContainingTextToBeCopied); 
    copyDiv.style.display = 'block'; 
    copyDiv.focus(); 
    document.execCommand('SelectAll'); 
    document.execCommand("Copy", false, null); 
    copyDiv.style.display = 'none'; 
} 

Tôi không chắc chắn có thể sao chép từ một div ẩn bằng cách sử dụng phương pháp này, điều này sẽ có ý nghĩa về mặt bảo mật của trình duyệt vì việc truy cập không được yêu cầu vào khay nhớ tạm sẽ hơi rủi ro. Cách tiếp cận được thực hiện có cùng kết quả mong muốn.

Answer 3

Đây là giải pháp của tôi mà không sử dụng jQuery:

function setClipboard(value) { 
 
    var tempInput = document.createElement("input"); 
 
    tempInput.style = "position: absolute; left: -1000px; top: -1000px"; 
 
    tempInput.value = value; 
 
    document.body.appendChild(tempInput); 
 
    tempInput.select(); 
 
    document.execCommand("copy"); 
 
    document.body.removeChild(tempInput); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Set Clipboard</title> 
 
</head> 
 
<body> 
 
    <button onclick="setClipboard('foo loves bar')">Set Clipboard</button> 
 
</body> 
 
</html>