Apa cara terbaik untuk menyalin teks ke clipboard? (multi-browser)

Saya telah mencoba:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

tetapi di Internet Explorer itu memberikan kesalahan sintaksis. Di Firefox, katanya unsafeWindow is not defined.

Trik yang bagus tanpa flash: Bagaimana Trello mengakses clipboard pengguna?

Gambaran

Ada tiga API peramban utama untuk disalin ke clipboard:

1. API Clipboard Async [navigator.clipboard.writeText]
   • Porsi yang berfokus pada teks tersedia di Chrome 66 (Maret 2018)
   • Akses asinkron dan menggunakan Janji JavaScript , dapat ditulis sehingga pengguna keamanan meminta (jika ditampilkan) tidak mengganggu JavaScript di halaman.
   • Teks dapat disalin ke clipboard langsung dari variabel.
   • Hanya didukung pada halaman yang dilayani melalui HTTPS.
   • Di Chrome 66 halaman di tab aktif dapat menulis ke clipboard tanpa izin izin.
2. document.execCommand('copy')
   • Sebagian besar browser mendukung ini pada ~ April 2015 (lihat Dukungan Browser di bawah).
   • Akses sinkron, yaitu menghentikan JavaScript di halaman hingga selesai termasuk menampilkan dan berinteraksi dengan pengguna dengan prompt keamanan.
   • Teks dibaca dari DOM dan ditempatkan di clipboard.
   • Selama pengujian ~ April 2015 hanya Internet Explorer yang tercatat sebagai menampilkan izin meminta saat menulis ke clipboard.
3. Mengganti acara salin
   • Lihat dokumentasi Clipboard API tentang Mengesampingkan acara salin .
   • Memungkinkan Anda untuk mengubah apa yang muncul di clipboard dari setiap peristiwa penyalinan, dapat menyertakan format data lain selain teks biasa.
   • Tidak dibahas di sini karena tidak langsung menjawab pertanyaan.

Catatan pengembangan umum

Jangan berharap perintah terkait clipboard berfungsi saat Anda menguji kode di konsol. Secara umum halaman tersebut harus aktif (Async Clipboard API) atau memerlukan interaksi pengguna (misalnya klik pengguna) untuk mengizinkan ( document.execCommand('copy')) mengakses clipboard lihat di bawah untuk lebih jelasnya.

PENTING (dicatat di sini 2020/02/20)

Perhatikan bahwa sejak posting ini pada awalnya ditulis, penghentian izin di lintas asal IFRAME dan IFRAME "sandboxing" IFRAME lainnya mencegah demo tertanam tombol "Jalankan cuplikan kode" tombol dan "contoh codepen.io" dari bekerja di beberapa browser (termasuk Chrome dan Microsoft Edge ).

Untuk mengembangkan membuat halaman web Anda sendiri, sajikan halaman itu melalui koneksi HTTPS untuk diuji dan dikembangkan.

Berikut ini adalah halaman uji / demo yang menunjukkan kode berfungsi: https://deanmarktaylor.github.io/clipboard-test/

Async + Fallback

Karena tingkat dukungan browser untuk Async Clipboard API baru, Anda mungkin ingin mundur ke document.execCommand('copy')metode untuk mendapatkan jangkauan browser yang baik.

Berikut ini adalah contoh sederhana (mungkin tidak berfungsi tertanam di situs ini, baca catatan "penting" di atas):

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  
  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

(contoh codepen.io mungkin tidak berfungsi, baca catatan "penting" di atas) Perhatikan bahwa cuplikan ini tidak berfungsi dengan baik di pratinjau tertanam Stack Overflow, Anda dapat mencobanya di sini: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors = 1011

API Clipboard Async

• Pos pengumuman Chrome 66 (Maret 2018)
• Referensi draf dokumentasi API Clipboard Async

Perhatikan bahwa ada kemampuan untuk "meminta izin" dan menguji akses ke clipboard melalui API izin di Chrome 66.

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ('copy')

Sisa dari pos ini membahas nuansa dan detail document.execCommand('copy')API.

Dukungan Browser

document.execCommand('copy')Dukungan JavaScript telah berkembang, lihat tautan di bawah untuk pembaruan browser:

• Internet Explorer 10+ (walaupun dokumen ini menunjukkan ada dukungan dari Internet Explorer 5.5+).
• Google Chrome 43+ (~ April 2015)
• Mozilla Firefox 41+ (pengiriman ~ September 2015)
• Opera 29+ (berdasarkan Chromium 42, ~ April 2015)

Contoh sederhana

(mungkin tidak berfungsi tertanam di situs ini, baca catatan "penting" di atas)

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

Contoh Kompleks: Salin ke clipboard tanpa menampilkan input

Contoh sederhana di atas berfungsi dengan baik jika ada elemen textareaatau inputyang terlihat di layar.

Dalam beberapa kasus, Anda mungkin ingin menyalin teks ke clipboard tanpa menampilkan input/ textareaelemen. Ini adalah salah satu contoh cara untuk mengatasi ini (pada dasarnya memasukkan elemen, salin ke clipboard, hapus elemen):

Diuji dengan Google Chrome 44, Firefox 42.0a1 dan Internet Explorer 11.0.8600.17814.

(mungkin tidak berfungsi tertanam di situs ini, baca catatan "penting" di atas)

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a
  // flash, so some of these are just precautions. However in
  // Internet Explorer the element is visible whilst the popup
  // box asking the user for permission for the web page to
  // copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

Catatan tambahan

Hanya berfungsi jika pengguna mengambil tindakan

Semua document.execCommand('copy')panggilan harus dilakukan sebagai akibat langsung dari tindakan pengguna, mis. Klik pengendali acara. Ini adalah langkah untuk mencegah mengacaukan clipboard pengguna ketika mereka tidak mengharapkannya.

Lihat posting Google Developers di sini untuk info lebih lanjut.

API Clipboard

Perhatikan spesifikasi draft API Clipboard lengkap dapat ditemukan di sini: https://w3c.github.io/clipboard-apis/

Apakah ini didukung?

• document.queryCommandSupported('copy')harus kembali truejika perintah "didukung oleh browser".
• dan document.queryCommandEnabled('copy')kembali truejika document.execCommand('copy')akan berhasil jika dipanggil sekarang. Memeriksa untuk memastikan perintah dipanggil dari utas yang dimulai pengguna dan persyaratan lainnya dipenuhi.

Namun sebagai contoh masalah kompatibilitas browser, Google Chrome dari ~ April hingga ~ Oktober 2015 hanya kembali truedari document.queryCommandSupported('copy')jika perintah dipanggil dari utas yang dimulai pengguna.

Perhatikan detail kompatibilitas di bawah ini.

Detail Kompatibilitas Browser

Sementara panggilan sederhana untuk document.execCommand('copy')dibungkus dengan try/ catchblok yang disebut sebagai hasil dari klik pengguna akan membuat Anda mendapatkan kompatibilitas yang paling banyak, yang berikut memiliki beberapa ketentuan:

Setiap panggilan ke document.execCommand, document.queryCommandSupportedatau document.queryCommandEnabledharus dibungkus dengan try/ catchblok.

Implementasi browser yang berbeda dan versi browser melempar berbagai jenis pengecualian ketika dipanggil alih-alih kembali false.

Implementasi browser yang berbeda masih dalam fluks dan Clipboard API masih dalam konsep, jadi ingatlah untuk melakukan pengujian Anda.

Menyalin otomatis ke clipboard mungkin berbahaya, oleh karena itu sebagian besar browser (kecuali IE) membuatnya sangat sulit. Secara pribadi, saya menggunakan trik sederhana berikut:

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

Pengguna disajikan dengan kotak prompt, di mana teks yang akan disalin sudah dipilih. Sekarang cukup untuk menekan Ctrl+ Cdan Enter(untuk menutup kotak) - dan voila!

Sekarang operasi penyalinan clipboard adalah AMAN, karena pengguna melakukannya secara manual (tetapi dengan cara yang sangat mudah). Tentu saja, berfungsi di semua browser.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>

Pendekatan berikut berfungsi di Chrome, Firefox, Internet Explorer dan Edge, dan dalam versi terbaru Safari (dukungan salin ditambahkan dalam versi 10 yang dirilis Oktober 2016).

• Buat textarea dan atur isinya ke teks yang ingin Anda salin ke clipboard.
• Tambahkan teks ke DOM.
• Pilih teks dalam textarea.
• Hubungi document.execCommand ("copy")
• Hapus textarea dari dom.

Catatan: Anda tidak akan melihat textarea, karena ditambahkan dan dihapus dalam permintaan kode Javascript yang sama dan sinkron.

Beberapa hal yang harus diperhatikan jika Anda menerapkan ini sendiri:

• Untuk alasan keamanan, ini hanya dapat dipanggil dari pengendali acara seperti klik (Seperti halnya membuka jendela).
• Internet Explorer akan menampilkan dialog izin saat pertama kali papan klip diperbarui.
• Internet Explorer, dan Edge akan menggulir ketika textarea difokuskan.
• execCommand () dapat melempar dalam beberapa kasus.
• Baris baru dan tab bisa tertelan kecuali Anda menggunakan textarea. (Sebagian besar artikel tampaknya merekomendasikan penggunaan div)
• Textarea akan terlihat ketika dialog Internet Explorer ditampilkan, Anda harus menyembunyikannya, atau menggunakan clipboardData API khusus Internet Explorer.
• Di Internet Explorer, administrator sistem dapat menonaktifkan API clipboard.

Fungsi di bawah ini harus menangani semua masalah berikut sebersih mungkin. Silakan tinggalkan komentar jika Anda menemukan masalah atau punya saran untuk memperbaikinya.

// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text);

    }
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

Ini pendapat saya tentang yang itu ...

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@korayem: Perhatikan bahwa menggunakan inputbidang html tidak akan menghormati jeda baris \ndan akan meratakan teks apa pun menjadi satu baris.

Seperti yang disebutkan oleh @nikksan di komentar, menggunakan textareaakan memperbaiki masalah sebagai berikut:

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}

Jika Anda menginginkan solusi yang benar-benar sederhana (membutuhkan waktu kurang dari 5 menit untuk berintegrasi) dan terlihat bagus di luar kotak, maka Clippy adalah alternatif yang bagus untuk beberapa solusi yang lebih kompleks.

Itu ditulis oleh salah satu pendiri GitHub. Contoh kode embed Flash di bawah ini:

<object
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   width="110"
   height="14"
   id="clippy">
  <param name="movie" value="/flash/clippy.swf"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noscale"/>
  <param NAME="FlashVars" value="text=#{text}"/>
  <param name="bgcolor" value="#{bgcolor}"/>
  <embed
     src="/flash/clippy.swf"
     width="110"
     height="14"
     name="clippy"
     quality="high"
     allowScriptAccess="always"
     type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer"
     FlashVars="text=#{text}"
     bgcolor="#{bgcolor}"/>
</object>

Ingatlah untuk mengganti #{text}dengan teks yang perlu Anda salin, dan #{bgcolor}dengan warna.

Membaca dan memodifikasi clipboard dari halaman web menimbulkan masalah keamanan dan privasi. Namun, di Internet Explorer, dimungkinkan untuk melakukannya. Saya menemukan cuplikan contoh ini :

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />

Saya baru-baru ini menulis posting blog teknis tentang masalah ini (saya bekerja di Lucidchart dan kami baru-baru ini melakukan perombakan di clipboard kami).

Menyalin teks biasa ke clipboard relatif sederhana, dengan asumsi Anda ingin melakukannya selama acara penyalinan sistem (pengguna menekan CtrlCatau menggunakan menu browser).

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

Menempatkan teks pada clipboard bukan selama acara penyalinan sistem jauh lebih sulit. Sepertinya beberapa dari jawaban referensi cara lain untuk melakukannya melalui Flash, yang merupakan satu-satunya cara lintas-browser untuk melakukannya (sejauh yang saya mengerti).

Selain itu, ada beberapa opsi berdasarkan browser-per-browser.

Ini adalah yang paling sederhana di IE, di mana Anda dapat mengakses objek clipboard Data kapan saja dari JavaScript melalui:

window.clipboardData

(Ketika Anda mencoba melakukan ini di luar sistem memotong, menyalin, atau menempel acara, namun, IE akan meminta pengguna untuk memberikan izin clipboard aplikasi web.)

Di Chrome, Anda dapat membuat ekstensi Chrome yang akan memberi Anda izin papan klip (inilah yang kami lakukan untuk Lucidchart). Maka bagi pengguna dengan ekstensi Anda yang terpasang, Anda hanya perlu mem-flash event sistem sendiri:

document.execCommand('copy');

Sepertinya Firefox memiliki beberapa opsi yang memungkinkan pengguna untuk memberikan izin ke situs tertentu untuk mengakses clipboard, tetapi saya belum mencoba semua ini secara pribadi.

clipboard.js adalah utilitas kecil, non-Flash, yang memungkinkan penyalinan data teks atau HTML ke clipboard. Ini sangat mudah digunakan, cukup sertakan .js dan gunakan sesuatu seperti ini:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js juga ada di GitHub .

Catatan: Ini sudah usang sekarang. Bermigrasi ke sini .

ZeroClipboard adalah solusi lintas-browser terbaik yang saya temukan:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

Jika Anda memerlukan dukungan non-flash untuk iOS, Anda cukup menambahkan back-back:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard

Pada tahun 2018, inilah cara Anda melakukannya:

async copySomething(text?) {
  try {
    const toCopy = text || location.href;
    await navigator.clipboard.writeText(toCopy);
    console.log('Text or Page URL copied');
  }
  catch (err) {
    console.error('Failed to copy: ', err);
  }
}

Ini digunakan dalam kode Angular 6+ saya seperti:

<button mat-menu-item (click)="copySomething()">
    <span>Copy link</span>
</button>

Jika saya meneruskan sebuah string, itu menyalinnya. Jika tidak ada, itu menyalin URL halaman.

Lebih banyak senam untuk hal-hal clipboard dapat dilakukan juga. Lihat informasi lebih lanjut di sini:

Membuka Blokir Akses Clipboard

Dari salah satu proyek yang saya kerjakan, plugin jQuery copy-to-clipboard yang memanfaatkan pustaka Zero Clipboard .

Lebih mudah digunakan daripada plugin Zero Clipboard asli jika Anda adalah pengguna jQuery yang berat.

Karena Chrome 42+ dan Firefox 41+ sekarang mendukung perintah document.execCommand ('copy') . Jadi saya membuat beberapa fungsi untuk kemampuan copy-to-clipboard lintas-browser menggunakan kombinasi jawaban lama Tim Down dan jawaban Pengembang Google :

function selectElementContents(el) {
    // Copy textarea, pre, div, etc.
    if (document.body.createTextRange) {
        // IE
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.select();
        textRange.execCommand("Copy");
    } 
    else if (window.getSelection && document.createRange) {
        // Non-Internet Explorer
        var range = document.createRange();
        range.selectNodeContents(el);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
            console.log('Copy command was ' + msg);
        }
        catch (err) {
            console.log('Oops, unable to copy');
        }
    }
} // end function selectElementContents(el)

function make_copy_button(el) {
    var copy_btn = document.createElement('input');
    copy_btn.type = "button";
    el.parentNode.insertBefore(copy_btn, el.nextSibling);
    copy_btn.onclick = function() {
        selectElementContents(el);
    };

    if (document.queryCommandSupported("copy") || parseInt(navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./)[2]) >= 42) {
        // Copy works with Internet Explorer 4+, Chrome 42+, Firefox 41+, Opera 29+
        copy_btn.value = "Copy to Clipboard";
    }
    else {
        // Select only for Safari and older Chrome, Firefox and Opera
        copy_btn.value = "Select All (then press Ctrl + C to Copy)";
    }
}
/* Note: document.queryCommandSupported("copy") should return "true" on browsers that support copy
    but there was a bug in Chrome versions 42 to 47 that makes it return "false".  So in those
    versions of Chrome feature detection does not work!
    See https://code.google.com/p/chromium/issues/detail?id=476508
*/

make_copy_button(document.getElementById("markup"));

<pre id="markup">
  Text that can be copied or selected with cross browser support.
</pre>

Saya menggunakan ini dengan sangat sukses ( tanpa jQuery atau kerangka kerja lainnya).

function copyToClp(txt){
    txt = document.createTextNode(txt);
    var m = document;
    var w = window;
    var b = m.body;
    b.appendChild(txt);
    if (b.createTextRange) {
        var d = b.createTextRange();
        d.moveToElementText(txt);
        d.select();
        m.execCommand('copy');
    } 
    else {
        var d = m.createRange();
        var g = w.getSelection;
        d.selectNodeContents(txt);
        g().removeAllRanges();
        g().addRange(d);
        m.execCommand('copy');
        g().removeAllRanges();
    }
    txt.remove();
}

Peringatan

Tab dikonversi ke spasi (setidaknya di Chrome).

Saya menemukan solusi berikut:

Pada penangan tombol bawah membuat tag "pre". Kami mengatur konten untuk disalin ke tag ini, lalu membuat pilihan pada tag ini dan mengembalikan true di handler. Ini memanggil penangan standar chrome dan menyalin teks yang dipilih.

Dan jika perlu, Anda dapat mengatur batas waktu untuk fungsi untuk mengembalikan pilihan sebelumnya. Implementasi saya di Mootools:

   function EnybyClipboard() {
     this.saveSelection = false;
     this.callback = false;
     this.pastedText = false;

     this.restoreSelection = function() {
       if (this.saveSelection) {
         window.getSelection().removeAllRanges();
         for (var i = 0; i < this.saveSelection.length; i++) {
           window.getSelection().addRange(this.saveSelection[i]);
         }
         this.saveSelection = false;
       }
     };

     this.copyText = function(text) {
       var div = $('special_copy');
       if (!div) {
         div = new Element('pre', {
           'id': 'special_copy',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
       }
       div.set('text', text);
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         setTimeout(this.restoreSelection.bind(this), 100);
       } else return alert('Copy not work. :(');
     };

     this.getPastedText = function() {
       if (!this.pastedText) alert('Nothing to paste. :(');
       return this.pastedText;
     };

     this.pasteText = function(callback) {
       var div = $('special_paste');
       if (!div) {
         div = new Element('textarea', {
           'id': 'special_paste',
           'style': 'opacity: 0;position: absolute;top: -10000px;right: 0;'
         });
         div.injectInside(document.body);
         div.addEvent('keyup', function() {
           if (this.callback) {
             this.pastedText = $('special_paste').get('value');
             this.callback.call(null, this.pastedText);
             this.callback = false;
             this.pastedText = false;
             setTimeout(this.restoreSelection.bind(this), 100);
           }
         }.bind(this));
       }
       div.set('value', '');
       if (document.createRange) {
         var rng = document.createRange();
         rng.selectNodeContents(div);
         this.saveSelection = [];
         var selection = window.getSelection();
         for (var i = 0; i < selection.rangeCount; i++) {
           this.saveSelection[i] = selection.getRangeAt(i);
         }
         window.getSelection().removeAllRanges();
         window.getSelection().addRange(rng);
         div.focus();
         this.callback = callback;
       } else return alert('Fail to paste. :(');
     };
   }

Pemakaian:

enyby_clip = new EnybyClipboard(); //init 

enyby_clip.copyText('some_text'); // place this in CTRL+C handler and return true;

enyby_clip.pasteText(function callback(pasted_text) {
        alert(pasted_text);
}); // place this in CTRL+V handler and return true;

Pada paste, ia menciptakan textarea dan bekerja dengan cara yang sama.

PS mungkin solusi ini dapat digunakan untuk membuat solusi cross-browser sepenuhnya tanpa flash. Ini bekerja di FF dan Chrome.

Metode lain akan menyalin teks biasa ke clipboard. Untuk menyalin HTML (yaitu, Anda dapat menempelkan hasilnya ke editor WSIWYG), Anda dapat melakukan hal berikut di IE ONLY . Ini pada dasarnya berbeda dari metode lain, karena browser benar-benar terlihat memilih konten.

// create an editable DIV and append the HTML content you want copied
var editableDiv = document.createElement("div");
with (editableDiv) {
    contentEditable = true;
}     
editableDiv.appendChild(someContentElement);          

// select the editable content and copy it to the clipboard
var r = document.body.createTextRange();
r.moveToElementText(editableDiv);
r.select();  
r.execCommand("Copy");

// deselect, so the browser doesn't leave the element visibly selected
r.moveToElementText(someHiddenDiv);
r.select();   

Saya telah mengumpulkan apa yang saya pikir adalah yang terbaik.

• Menggunakan cssText untuk menghindari pengecualian di Internet Explorer yang bertentangan dengan gaya secara langsung.
• Kembalikan pilihan jika ada
• Setel hanya baca agar keyboard tidak muncul di perangkat seluler
• Memiliki solusi untuk iOS sehingga benar-benar berfungsi seperti biasanya memblokir execCommand.

Ini dia:

const copyToClipboard = (function initClipboardText() {
  const textarea = document.createElement('textarea');

  // Move it off screen.
  textarea.style.cssText = 'position: absolute; left: -99999em';

  // Set to readonly to prevent mobile devices opening a keyboard when
  // text is .select()'ed.
  textarea.setAttribute('readonly', true);

  document.body.appendChild(textarea);

  return function setClipboardText(text) {
    textarea.value = text;

    // Check if there is any content selected previously.
    const selected = document.getSelection().rangeCount > 0 ?
      document.getSelection().getRangeAt(0) : false;

    // iOS Safari blocks programmtic execCommand copying normally, without this hack.
    // /programming/34045777/copy-to-clipboard-using-javascript-in-ios
    if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      const editable = textarea.contentEditable;
      textarea.contentEditable = true;
      const range = document.createRange();
      range.selectNodeContents(textarea);
      const sel = window.getSelection();
      sel.removeAllRanges();
      sel.addRange(range);
      textarea.setSelectionRange(0, 999999);
      textarea.contentEditable = editable;
    }
    else {
      textarea.select();
    }

    try {
      const result = document.execCommand('copy');

      // Restore previous selection.
      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }

      return result;
    }
    catch (err) {
      console.error(err);
      return false;
    }
  };
})();

Pemakaian: copyToClipboard('some text')

Pada Flash 10, Anda hanya dapat menyalin ke clipboard jika tindakan berasal dari interaksi pengguna dengan objek Flash. ( Baca bagian terkait dari pengumuman Adobe 10 Flash )

Solusinya adalah terlalu banyak objek flash di atas tombol Salin, atau elemen apa pun yang memulai salinan. Zero Clipboard saat ini adalah perpustakaan terbaik dengan implementasi ini. Pengembang Flash berpengalaman mungkin hanya ingin membuat perpustakaan sendiri.

Saya menemukan solusi berikut:

Saya memiliki teks dalam input tersembunyi. Karena setSelectionRangetidak bekerja pada input tersembunyi, saya mengubah sementara jenis ke teks, menyalin teks, dan kemudian membuatnya tersembunyi lagi. Jika Anda ingin menyalin teks dari suatu elemen, Anda bisa meneruskannya ke fungsi dan menyimpan kontennya di variabel target.

jQuery('#copy').on('click', function () {
    copyToClipboard();
});

function copyToClipboard() {
    var target = jQuery('#hidden_text');

    // Make it visible, so can be focused
    target.attr('type', 'text');
    target.focus();
    // Select all the text
    target[0].setSelectionRange(0, target.val().length);

    // Copy the selection
    var succeed;
    try {
        succeed = document.execCommand("copy");
    }
    catch (e) {
        succeed = false;
    }

    // Hide input again
    target.attr('type', 'hidden');

    return succeed;
}

Salin teks dari input HTML ke clipboard:

 function myFunction() {
   /* Get the text field */
   var copyText = document.getElementById("myInput");

   /* Select the text field */
   copyText.select();

   /* Copy the text inside the text field */
   document.execCommand("Copy");

   /* Alert the copied text */
   alert("Copied the text: " + copyText.value);
 }

 <!-- The text field -->
 <input type="text" value="Hello Friend" id="myInput">

 <!-- The button used to copy the text -->
<button onclick="myFunction()">Copy text</button>

Catatan: The document.execCommand()Metode tidak didukung di Internet Explorer 9 dan sebelumnya.

Sumber : W3Schools - Salin Teks ke Clipboard

Ada banyak jawaban, namun ingin menambahkannya (jQuery). Berfungsi bagus pada peramban apa pun, juga peramban seluler (yaitu, meminta keamanan, tetapi ketika Anda menerimanya berfungsi dengan baik).

function appCopyToClipBoard(sText)
{
    var oText = false,
        bResult = false;
    try
    {
        oText = document.createElement("textarea");
        $(oText).addClass('clipboardCopier').val(sText).insertAfter('body').focus();
        oText.select();
        document.execCommand("Copy");
        bResult = true;
    }
    catch(e) {
    }

    $(oText).remove();
    return bResult;
}

Dalam kode Anda:

if (!appCopyToClipBoard('Hai there! This is copied to the clipboard.'))
{
    alert('Sorry, copy to clipboard failed.');
}

Ini sedikit kombinasi antara jawaban yang lain.

var copyToClipboard = function(textToCopy){
    $("body")
        .append($('<textarea name="fname" class="textToCopyInput"/>' )
        .val(textToCopy))
        .find(".textToCopyInput")
        .select();
      try {
        var successful = document.execCommand('copy');
        var msg = successful ? 'successful' : 'unsuccessful';
        alert('Text copied to clipboard!');
      } catch (err) {
          window.prompt("To copy the text to clipboard: Ctrl+C, Enter", textToCopy);
      }
     $(".textToCopyInput").remove();
}

Ini menggunakan jQuery, tetapi tentu saja tidak harus. Anda dapat mengubahnya jika Anda mau. Saya baru saja meminta jQuery. Anda juga dapat menambahkan beberapa CSS untuk memastikan input tidak muncul. Misalnya sesuatu seperti:

.textToCopyInput{opacity: 0; position: absolute;}

Atau tentu saja Anda juga bisa melakukan beberapa style inline

.append($('<textarea name="fname" style="opacity: 0;  position: absolute;" class="textToCopyInput"/>' )

Di browser selain IE Anda harus menggunakan objek flash kecil untuk memanipulasi clipboard, misalnya

• Salin otomatis ke papan klip

Saya memiliki masalah yang sama dengan membangun edit kisi khusus (seperti Excel) dan kompatibilitas dengan Excel. Saya harus mendukung pemilihan beberapa sel, menyalin dan menempel.

Solusi: buat sebuah textarea di mana Anda akan memasukkan data untuk disalin pengguna (untuk saya ketika pengguna memilih sel), atur fokus padanya (misalnya, ketika pengguna menekan Ctrl) dan pilih seluruh teks.

Jadi, ketika pengguna menekan Ctrl+ Cdia akan menyalin sel-sel yang dia pilih. Setelah pengujian hanya mengubah ukuran textarea menjadi satu pixel (saya tidak menguji apakah itu akan berfungsi pada layar: tidak ada). Ini bekerja dengan baik di semua browser, dan transparan bagi pengguna.

Menempel - Anda bisa melakukan hal yang sama seperti ini (berbeda pada target Anda) - tetap fokus pada textarea dan menangkap acara tempel menggunakan onpaste (dalam proyek saya, saya menggunakan textareas dalam sel untuk mengedit).

Saya tidak bisa menempelkan contoh (proyek komersial), tetapi Anda mendapatkan idenya.

Saya telah menggunakan clipboard.js.

Kita bisa mendapatkannya di npm:

npm install clipboard --save

Dan juga pada Bower

bower install clipboard --save

Penggunaan & contoh ada di https://zenorocha.github.io/clipboard.js/ .

Ini adalah perluasan dari jawaban @ Chase, dengan keuntungan bahwa ia akan bekerja untuk elemen IMAGE dan TABLE, tidak hanya DIV pada IE9.

if (document.createRange) {
    // IE9 and modern browsers
    var r = document.createRange();
    r.setStartBefore(to_copy);
    r.setEndAfter(to_copy);
    r.selectNode(to_copy);
    var sel = window.getSelection();
    sel.addRange(r);
    document.execCommand('Copy');  // does nothing on FF
} else {
    // IE 8 and earlier.  This stuff won't work on IE9.
    // (unless forced into a backward compatibility mode,
    // or selecting plain divs, not img or table). 
    var r = document.body.createTextRange();
    r.moveToElementText(to_copy);
    r.select()
    r.execCommand('Copy');
}

Sepertinya saya salah membaca pertanyaan, tetapi untuk referensi, Anda dapat mengekstrak berbagai DOM (bukan ke clipboard; kompatibel dengan semua browser modern), dan menggabungkannya dengan acara oncopy dan onpaste dan onbeforepaste untuk mendapatkan perilaku clipboard. Berikut kode untuk mencapai ini:

function clipBoard(sCommand) {
  var oRange=contentDocument.createRange();
  oRange.setStart(startNode, startOffset);
  oRange.setEnd(endNode, endOffset);
/* This is where the actual selection happens.
in the above, startNode and endNode are dom nodes defining the beginning 
and end of the "selection" respectively. startOffset and endOffset are 
constants that are defined as follows:

END_TO_END: 2
END_TO_START: 3
NODE_AFTER: 1
NODE_BEFORE: 0
NODE_BEFORE_AND_AFTER: 2
NODE_INSIDE: 3
START_TO_END: 1
START_TO_START: 0

and would be used like oRange.START_TO_END */
      switch(sCommand) {
    case "cut":
          this.oFragment=oRange.extractContents();
      oRange.collapse();
      break;
    case "copy":
      this.oFragment=oRange.cloneContents();
      break;
    case "paste":
      oRange.deleteContents();
      var cloneFragment=this.oFragment.cloneNode(true)
      oRange.insertNode(cloneFragment);
      oRange.collapse();
      break;
  }
}

Salahku. Ini hanya berfungsi di IE.

Berikut ini cara lain untuk menyalin teks:

<p>
    <a onclick="window.clipboardData.setData('text', document.getElementById('Test').innerText);">Copy</a>
</p>

Ini adalah satu-satunya hal yang pernah saya kerjakan, setelah mencari berbagai cara di Internet. Ini adalah topik yang berantakan. Ada banyak solusi yang diposting di seluruh dunia dan kebanyakan dari mereka tidak berfungsi. Ini bekerja untuk saya:

CATATAN: Kode ini hanya akan berfungsi ketika dijalankan sebagai kode sinkron langsung ke sesuatu seperti metode 'onClick'. Jika Anda memanggil respons asinkron ke Ajax atau dengan cara asinkron apa pun, itu tidak akan berfungsi.

copyToClipboard(text) {
    var copyText = document.createElement("input");
    copyText.type = "text";
    document.body.appendChild(copyText);
    copyText.style = "display: inline; width: 1px;";
    copyText.value = text;
    copyText.focus();
    document.execCommand("SelectAll");
    document.execCommand("Copy");
    copyText.remove();
}

Saya menyadari kode ini akan menunjukkan komponen lebar 1-pixel terlihat di layar selama satu milidetik, tetapi memutuskan untuk tidak khawatir tentang itu, yang merupakan sesuatu yang orang lain dapat mengatasi jika masalah nyata.

Untuk menyalin teks yang dipilih ('Teks Untuk Disalin') ke clipboard Anda, buat Bookmarklet (bookmark browser yang mengeksekusi JavaScript) dan jalankan (klik di atasnya). Ini akan membuat textarea sementara.

Kode dari GitHub:

https://gist.github.com/stefanmaric/2abf96c740191cda3bc7a8b0fc905a7d

(function (text) {
  var node = document.createElement('textarea');
  var selection = document.getSelection();

  node.textContent = text;
  document.body.appendChild(node);

  selection.removeAllRanges();
  node.select();
  document.execCommand('copy');

  selection.removeAllRanges();
  document.body.removeChild(node);
})('Text To Copy');