Salin ke clipboard tanpa Flash

Saya menemukan banyak solusi untuk menyalin ke clipboard, tetapi semuanya dengan flash, atau untuk sisi situs web. Saya mencari metode salin ke clipboard secara otomatis, tanpa flash dan untuk sisi pengguna, ini untuk skrip pengguna dan tentu saja lintas-browser.

Tanpa flash, ini tidak mungkin dilakukan di sebagian besar browser. Papan klip pengguna adalah sumber daya yang relevan dengan keamanan karena dapat berisi hal-hal seperti sandi atau nomor kartu kredit. Karenanya, browser seharusnya tidak mengizinkan akses Javascript ke sana (beberapa mengizinkannya dengan peringatan yang ditunjukkan bahwa pengguna telah mengonfirmasi, atau dengan kode Javascript yang ditandatangani, tetapi tidak ada yang lintas-browser).

Saya telah mencoba solusi flash dan saya juga tidak suka. Terlalu rumit dan terlalu lambat. Apa yang saya lakukan adalah membuat textarea, memasukkan data ke dalamnya dan menggunakan perilaku browser "CTRL + C".

Bagian 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);

Bagian HTML:
<textarea id="textArea1"></textarea>

Sekarang, masukkan apa yang ingin Anda salin di 'Taruh Teks untuk Salin DI SINI. BISA MENJADI FUNGSI. ' daerah. Bekerja dengan baik untuk saya. Anda hanya perlu membuat satu kombinasi CTRL + C. Satu-satunya kelemahan adalah bahwa Anda akan memiliki textarea jelek yang ditampilkan di situs Anda. Jika Anda menggunakan style = "display: none" solusi penyalinan tidak akan bekerja.

clipboard.js baru saja dirilis untuk disalin ke clipboard tanpa perlu Flash

Lihat aksinya di sini> http://zenorocha.github.io/clipboard.js/#example-action

Akhirnya di sini! (Selama Anda tidak mendukung Safari atau IE8 ... -_-)

Sekarang Anda benar-benar dapat menangani tindakan clipboard tanpa Flash. Berikut dokumentasi yang relevan:

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

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

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

^{Sambil menunggu dengan tidak sabar dukungan Xbrowser untuk Clipboard API ...}

IE hanya akan meminta pengguna sekali untuk mengakses Clipboard.
Safari (5.1 pada saat menulis) tidak mendukung execCommanduntukcopy/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>

Semua browser (kecuali Firefox yang mampu hanya menangani mime ketik "plain/text"sejauh yang saya telah diuji) telah tidak dilaksanakan dengan Clipboard API . Yaitu, mencoba membaca acara papan klip di Chrome menggunakan

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

throws: Uncaught TypeError: Konstruktor ilegal

Sumber daya terbaik dari kekacauan luar biasa yang terjadi di antara browser dan Clipboard dapat dilihat di sini (caniuse.com) (→ Ikuti komentar di bawah "Catatan" ).
MDN mengatakan bahwa dukungan dasarnya adalah "(YA)" untuk semua browser yang tidak akurat karena seseorang akan mengharapkan setidaknya API berfungsi sama sekali.

Anda dapat menggunakan clipboard lokal ke halaman HTML. Ini memungkinkan Anda untuk menyalin / memotong / menempel konten DI DALAM halaman HTML, tetapi tidak dari / ke aplikasi pihak ketiga atau di antara dua halaman HTML.

Beginilah cara Anda menulis fungsi khusus untuk melakukan ini (diuji di chrome dan firefox):

Berikut adalah FIDDLE yang mendemonstrasikan bagaimana Anda bisa melakukan ini.

Saya juga akan menempelkan biola di sini untuk referensi.

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')akan melakukan apa yang kamu inginkan. Tetapi tidak ada contoh yang dapat digunakan secara langsung di utas ini tanpa cruft, jadi ini dia:

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')

Tidak ada jalan lain, Anda harus menggunakan flash. Ada plugin JQuery bernama jquery.copy yang menyediakan copy paste lintas browser dengan menggunakan file flash (swf). Ini mirip dengan cara kerja penyorot sintaks di blog saya.

Setelah Anda mereferensikan file jquery.copy.js, semua yang perlu Anda lakukan untuk memasukkan data ke clipboard dijalankan sebagai berikut:

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

Baik dan mudah ;)