Salin / Letakkan teks di clipboard dengan FireFox, Safari dan Chrome

Di Internet Explorer saya dapat menggunakan objek clipboardData untuk mengakses clipboard. Bagaimana saya bisa melakukannya di FireFox, Safari dan / atau Chrome?

Sekarang ada cara untuk melakukan ini dengan mudah di sebagian besar browser modern menggunakan

document.execCommand('copy');

Ini akan menyalin teks yang saat ini dipilih. Anda dapat memilih textArea atau kolom input menggunakan

document.getElementById('myText').select();

Untuk menyalin teks tanpa terlihat, Anda dapat membuat textArea dengan cepat, mengubah teks di kotak, memilihnya, menyalinnya, lalu menghapus textArea. Dalam kebanyakan kasus textArea ini bahkan tidak akan berkedip ke layar.

Untuk alasan keamanan, browser hanya akan mengizinkan Anda menyalin jika pengguna melakukan beberapa tindakan (mis. Mengklik tombol). Salah satu cara untuk melakukannya adalah dengan menambahkan acara onClick ke tombol html yang memanggil metode yang menyalin teks.

Contoh lengkapnya:

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}

<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

Untuk alasan keamanan, Firefox tidak mengizinkan Anda menempatkan teks di papan klip. Namun, ada solusi yang tersedia menggunakan Flash.

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

Satu-satunya kelemahan adalah ini membutuhkan Flash untuk diaktifkan.

sumber saat ini mati: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( dan begitu juga dengan cache Google )

Spreadsheets online mengaitkan acara Ctrl + C, Ctrl + V, dan mentransfer fokus ke kontrol TextArea tersembunyi dan mengatur kontennya ke konten papan klip baru yang diinginkan untuk disalin atau membaca kontennya setelah acara selesai untuk ditempel.

lihat juga Apakah mungkin membaca papan klip di Firefox, Safari, dan Chrome menggunakan Javascript?

Saat ini Musim Panas 2015, dan dengan begitu banyak kekacauan di sekitar Flash saya pikir saya akan menambahkan jawaban baru untuk pertanyaan ini yang menghindari penggunaannya sama sekali.

clipboard.js adalah utilitas bagus yang memungkinkan penyalinan teks atau data html ke clipboard. 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

Di 2017 Anda dapat melakukan ini (mengatakan ini karena utas ini hampir berusia 9 tahun!)

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

Dan sekarang untuk menyalin copyStringToClipboard('Hello World')

Jika Anda memperhatikan setDatagaris tersebut, dan bertanya-tanya apakah Anda dapat mengatur tipe data yang berbeda, jawabannya adalah ya.

Firefox mengizinkan Anda untuk menyimpan data di papan klip, tetapi karena implikasi keamanan, Firefox dinonaktifkan secara default. Lihat cara mengaktifkannya di "Memberikan akses JavaScript ke clipboard" di basis pengetahuan Mozilla Firefox.

Solusi yang ditawarkan oleh amdfan adalah yang terbaik jika Anda memiliki banyak pengguna dan mengkonfigurasi browser mereka bukanlah suatu pilihan. Meskipun Anda dapat menguji apakah papan klip tersedia dan menyediakan tautan untuk mengubah pengaturan, jika pengguna paham teknologi. Editor JavaScript TinyMCE mengikuti pendekatan ini.

Fungsi copyIntoClipboard () berfungsi untuk Flash 9, tetapi tampaknya rusak oleh rilis Flash player 10. Berikut solusi yang berfungsi dengan flash player baru:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

Ini solusi yang kompleks, tetapi berhasil.

Saya harus mengatakan bahwa tidak ada solusi ini yang benar - benar berfungsi. Saya telah mencoba solusi clipboard dari jawaban yang diterima, dan tidak berfungsi dengan Flash Player 10. Saya juga mencoba ZeroClipboard, dan saya sangat senang dengannya untuk sementara waktu.

Saat ini saya menggunakannya di situs saya sendiri ( http://www.blogtrog.com ), tetapi saya telah memperhatikan bug aneh dengannya. Cara kerja ZeroClipboard adalah menempatkan objek flash yang tidak terlihat di atas elemen pada halaman Anda. Saya telah menemukan bahwa jika elemen saya bergerak (seperti ketika pengguna mengubah ukuran jendela dan saya memiliki sesuatu yang benar), objek flash ZeroClipboard rusak dan tidak lagi menutupi objek. Saya curiga itu mungkin masih duduk di tempat asalnya. Mereka memiliki kode yang seharusnya menghentikannya, atau memasukkannya kembali ke elemen, tetapi tampaknya tidak berfungsi dengan baik.

Jadi ... dalam versi BlogTrog berikutnya, saya rasa saya akan mengikuti semua kode penyorot lain yang pernah saya lihat di alam liar dan menghapus tombol Salin ke Papan Klip. :-(

(Saya perhatikan bahwa Salinan ke Papan Klip dp.syntaxhiglighter juga rusak sekarang.)

pertanyaan yang terlalu lama tetapi saya tidak melihat jawaban ini di mana pun ...

Cek link ini:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

seperti yang dikatakan semua orang, untuk alasan keamanan secara default dinonaktifkan. link di atas menunjukkan petunjuk cara mengaktifkannya (dengan mengedit about: config di firefox atau user.js).

Untungnya ada plugin bernama "AllowClipboardHelper" yang membuat segalanya lebih mudah hanya dengan beberapa klik. namun Anda masih perlu menginstruksikan pengunjung situs web Anda tentang cara mengaktifkan akses di firefox.

Gunakan document.execCommand modern ("copy") dan jQuery. Lihat jawaban stackoverflow ini

var ClipboardHelper = { // as Object

copyElement: function ($element)
{
   this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
    var $tempInput =  $("<textarea>");
    $("body").append($tempInput);
    $tempInput.val(text).select();
    document.execCommand("copy");
    $tempInput.remove();
}};

Cara Menelepon:

 ClipboardHelper.copyText('Hello\nWorld');
 ClipboardHelper.copyElement($('body h1').first());

// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
  
  var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
      
        //todo prepare Text: remove double whitespaces, trim
        
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

    $(document).ready(function()
    {
         var $body=$('body');
         
        $body.on('click', '*[data-copy-text-to-clipboard]', function(event) 
        {
            var $btn=$(this);
            var text=$btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });
      
        $body.on('click', '.js-copy-element-to-clipboard', function(event) 
        {
            ClipboardHelper.copyElement($(this));
        });

    });


})( jQuery, window, document );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
"Hello
 World">
  Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World 
Element
</span>

Saya telah menggunakan Github's Clippy untuk kebutuhan saya, tombol berbasis Flash sederhana. Bekerja dengan baik, jika seseorang tidak membutuhkan gaya dan senang dengan memasukkan apa yang akan ditempelkan di sisi server sebelumnya.

Sedikit perbaikan pada solusi Flash adalah mendeteksi flash 10 menggunakan swfobject:

http://code.google.com/p/swfobject/

dan kemudian jika ditampilkan sebagai flash 10, coba muat objek Shockwave menggunakan javascript. Shockwave dapat membaca / menulis ke clipboard (di semua versi) juga menggunakan perintah copyToClipboard () dalam bahasa.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp bekerja dengan Flash 10 dan semua peramban yang mendukung Flash.

Juga ZeroClipboard telah diperbarui untuk menghindari bug yang disebutkan tentang pengguliran halaman yang menyebabkan film Flash tidak lagi berada di tempat yang benar.

Karena metode itu "Memerlukan" pengguna untuk mengklik tombol untuk menyalin, ini adalah kemudahan bagi pengguna dan tidak ada hal jahat yang terjadi.

coba buat variabel global memori yang menyimpan pilihan, kemudian fungsi lain dapat mengakses variabel dan melakukan paste misalnya ..

var memory = '';//outside the functions but within the script tag.

function moz_stringCopy(DOMEle,firstPos,secondPos) {

var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;

}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);

}

Jika Anda mendukung flash, Anda dapat menggunakan https://everyplay.com/assets/clipboard.swf dan menggunakan teks flashvars untuk mengatur teks

https://everyplay.com/assets/clipboard.swf?text=It%20Works

Itulah yang saya gunakan untuk menyalin dan Anda dapat menetapkan sebagai ekstra jika tidak mendukung opsi ini, Anda dapat menggunakan:

Untuk Internet Explorer: window.clipboardData.setData (DataFormat, Text) dan window.clipboardData.getData (DataFormat)

Anda dapat menggunakan Teks dan Url DataFormat untuk getData dan setData.

Dan untuk menghapus data:

Anda dapat menggunakan File DataFormat, HTML, Gambar, Teks dan URL. PS: Anda Perlu Menggunakan window.clipboardData.clearData (DataFormat);

Dan untuk yang tidak mendukung file windows.clipboardData dan swf flash Anda juga dapat menggunakan tombol control + c pada keyboard Anda untuk windows dan untuk mac perintahnya + c

Dari kode addon:

Jika ada orang lain yang mencari cara melakukannya dari kode chrome, Anda dapat menggunakan antarmuka nsIClipboardHelper seperti yang dijelaskan di sini: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

Gunakan document.execCommand('copy'). Didukung dalam versi terbaru dari Chrome, Firefox, Edge, dan Safari.

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" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

Clipboard API dirancang untuk menggantikan document.execCommand. Safari masih mengerjakan dukungan, jadi Anda harus menyediakan fallback hingga spesifikasi diselesaikan dan Safari menyelesaikan implementasi.

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};

<a href="/programming/127040/" rel="bookmark">Permalink</a>
<output></output>

Untuk alasan keamanan, clipboard Permissionsmungkin diperlukan untuk membaca dan menulis dari clipboard. Jika potongan tidak berfungsi pada SO, cobalah localhostatau domain tepercaya lainnya.

Membangun jawaban luar biasa dari @David dari Studio.201, ini berfungsi di Safari, FF, dan Chrome. Ini juga memastikan tidak ada flashing dapat terjadi dari textareadengan menempatkannya di luar layar.

// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {


   function copyText(text) {
    // Create temp element off-screen to hold text.
        var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
        $("body").append(tempElem);

        tempElem.val(text).select();
        document.execCommand("copy");
        tempElem.remove();
   }


    // ============================================================================
   // Class API
   // ============================================================================
    return {
        copyText: copyText
    };
})();