Sao chép vào khay nhớ tạm mà không có Flash

Tôi đã tìm thấy nhiều giải pháp để sao chép vào khay nhớ tạm, nhưng tất cả đều bằng flash hoặc cho trang web. Tôi đang tìm kiếm phương pháp sao chép vào khay nhớ tạm tự động, không có flash và đối với phía người dùng, nó dành cho người dùng và tất nhiên là trên nhiều trình duyệt.

Không có flash, nó chỉ đơn giản là không thể trong hầu hết các trình duyệt. Clipboard của người dùng là tài nguyên liên quan đến bảo mật vì nó có thể chứa những thứ như mật khẩu hoặc số thẻ tín dụng. Do đó, các trình duyệt đúng là không cho phép truy cập Javascript vào nó (một số cho phép nó với cảnh báo hiển thị rằng người dùng đã xác nhận hoặc với mã Javascript đã ký, nhưng không có trình duyệt nào trong số đó là trình duyệt chéo).

Tôi đã thử giải pháp flash và tôi cũng không thích. Quá phức tạp và quá chậm. Những gì tôi đã làm là tạo một vùng văn bản, đưa dữ liệu vào đó và sử dụng hành vi "CTRL + C" của trình duyệt.

Phần javascript jQuery:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

Phần HTML:
<textarea id="textArea1"></textarea>

Bây giờ, hãy đặt nội dung bạn muốn sao chép vào 'PUT THE TEXT TO COPY TẠI ĐÂY. CÓ THỂ LÀ MỘT CHỨC NĂNG. ' khu vực. Làm việc tốt cho tôi tôi. Bạn chỉ cần thực hiện một tổ hợp CTRL + C. Hạn chế duy nhất là bạn sẽ có một vùng văn bản xấu xí được hiển thị trong trang web của bạn. Nếu bạn sử dụng style = "display: none" thì giải pháp sao chép sẽ không hoạt động.

clipboard.js vừa được phát hành để sao chép vào khay nhớ tạm mà không cần Flash

Xem nó hoạt động tại đây> http://zenorocha.github.io/clipboard.js/#example-action

Cuối cùng thì nó cũng ở đây! (Miễn là bạn không hỗ trợ Safari hoặc IE8 ... -_-)

Bây giờ bạn thực sự có thể xử lý các hành động trên khay nhớ tạm mà không cần Flash. Đây là tài liệu liên quan:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=vi

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

^{Trong khi nóng lòng chờ đợi Xbrowser hỗ trợ API Clipboard ...}

IE sẽ chỉ nhắc người dùng một lần truy cập Bảng tạm.
Safari (5.1 tại thời điểm viết bài) không hỗ trợ execCommandchocopy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);

<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

Tất cả các trình duyệt (trừ Firefox có khả năng chỉ xử lý kịch câm gõ "plain/text"như xa như tôi đã thử nghiệm) đã không được thực hiện các API Clipboard . Tức là, đang cố đọc sự kiện khay nhớ tạm trong Chrome bằng

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

ném: Loại không có sẵn Lỗi: Hàm tạo bất hợp pháp

Bạn có thể xem tài nguyên tốt nhất về sự lộn xộn không thể tin được đang xảy ra giữa các trình duyệt và Clipboard tại đây (caniuse.com) (→ Theo dõi các nhận xét dưới "Ghi chú" ).
MDN nói rằng hỗ trợ cơ bản là "(CÓ)" cho tất cả các trình duyệt, điều này không chính xác vì người ta có thể mong đợi ít nhất là API hoạt động.

Bạn có thể sử dụng một khay nhớ tạm cục bộ cho trang HTML. Điều này cho phép bạn sao chép / cắt / dán nội dung TRONG VÒNG trang HTML, nhưng không phải từ / đến các ứng dụng của bên thứ ba hoặc giữa hai trang HTML.

Đây là cách bạn có thể viết một hàm tùy chỉnh để thực hiện việc này (được thử nghiệm trong chrome và firefox):

Đây là FIDDLE minh họa cách bạn có thể làm điều này.

Tôi cũng sẽ dán fiddle ở đây để tham khảo.

HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

document.execCommand('copy')sẽ làm những gì bạn muốn. Nhưng không có ví dụ nào có thể sử dụng trực tiếp trong chuỗi này mà không có sự cố, vì vậy đây là:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

Không có cách nào xung quanh, bạn phải sử dụng đèn flash. Có một plugin JQuery được gọi là jquery.copy cung cấp tính năng sao chép và dán trên nhiều trình duyệt bằng cách sử dụng tệp flash (swf). Điều này tương tự như cách công cụ đánh dấu cú pháp trên blog của tôi hoạt động.

Khi bạn tham chiếu tệp jquery.copy.js, tất cả những gì bạn cần làm để đẩy dữ liệu vào khay nhớ tạm được chạy như sau:

$.copy("some text to copy");

Tốt đẹp và dễ dàng ;)