Bagaimana cara menyalin teks di dalam div ke clipboard? Saya memiliki div dan perlu menambahkan tautan yang akan menambahkan teks ke clipboard. Apakah ada solusi untuk ini?

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

Setelah saya klik salin teks, lalu saya tekan Ctrl+ V, itu harus ditempel.

Edit per 2016

Pada 2016, Anda sekarang dapat menyalin teks ke clipboard di sebagian besar browser karena sebagian besar browser memiliki kemampuan untuk secara terprogram menyalin pilihan teks ke clipboard menggunakan document.execCommand("copy")yang bekerja di luar pilihan.

Seperti beberapa tindakan lain di browser (seperti membuka jendela baru), salin ke clipboard hanya dapat dilakukan melalui tindakan pengguna tertentu (seperti klik mouse). Misalnya, itu tidak dapat dilakukan melalui timer.

Berikut contoh kode:

document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
});

function copyToClipboard(elem) {
	  // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try {
    	  succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }
    
    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

input {
  width: 400px;
}

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Berikut ini demo yang lebih canggih: https://jsfiddle.net/jfriend00/v9g1x0o6/

Dan, Anda juga bisa mendapatkan perpustakaan pra-dibangun yang melakukan ini untuk Anda dengan clipboard.js .

Tua, bagian historis dari jawaban

Menyalin secara langsung ke clipboard melalui JavaScript tidak diizinkan oleh peramban modern apa pun karena alasan keamanan. Solusi yang paling umum adalah menggunakan kemampuan Flash untuk menyalin ke clipboard yang hanya dapat dipicu oleh klik pengguna langsung.

Seperti yang sudah disebutkan, ZeroClipboard adalah seperangkat kode populer untuk mengelola objek Flash untuk melakukan penyalinan. Saya sudah menggunakannya. Jika Flash diinstal pada perangkat penelusuran (yang mengesampingkan ponsel atau tablet), Flash itu berfungsi.

Cara kerja paling umum berikutnya adalah menempatkan teks yang terikat clipboard ke dalam bidang input, memindahkan fokus ke bidang itu dan menyarankan pengguna untuk menekan Ctrl+ Cuntuk menyalin teks.

Diskusi lain tentang masalah ini dan kemungkinan penyelesaiannya dapat ditemukan di pos Stack Overflow sebelumnya:

• Bagaimana cara menyalin ke clipboard di JavaScript?

• Bagaimana cara menyalin teks ke clipboard klien menggunakan jQuery?

• Bagaimana Anda bisa menyalin ke clipboard tanpa Flash?

Pertanyaan-pertanyaan ini meminta alternatif modern untuk menggunakan Flash telah menerima banyak upvotes pertanyaan dan tidak ada jawaban dengan solusi (mungkin karena tidak ada):

• Alternatif HTML5 untuk ZeroClipboard berbasis flash untuk menyalin data dengan aman ke clipboard?

• Salin ke clipboard tanpa Flash

Internet Explorer dan Firefox dulunya memiliki API non-standar untuk mengakses clipboard, tetapi versi mereka yang lebih modern telah mencela metode tersebut (mungkin karena alasan keamanan).

Ada upaya standar yang baru lahir untuk mencoba menemukan cara "aman" untuk menyelesaikan masalah papan klip yang paling umum (mungkin memerlukan tindakan pengguna tertentu seperti yang dibutuhkan oleh solusi Flash), dan sepertinya itu mungkin sebagian diimplementasikan dalam yang terbaru versi Firefox dan Chrome, tetapi saya belum mengonfirmasi hal itu.

Pembaruan 2020 : Solusi ini digunakan execCommand. Sementara fitur itu baik-baik saja pada saat menulis jawaban ini, sekarang dianggap usang . Ini masih akan berfungsi pada banyak browser, tetapi penggunaannya tidak disarankan karena dukungan dapat dibatalkan.

Ada cara non-Flash lain (selain dari Clipboard API yang disebutkan dalam jawaban jfriend00 ). Anda perlu memilih teks dan kemudian menjalankan perintahcopy untuk menyalin ke clipboard teks apa pun yang saat ini dipilih pada halaman.

Misalnya, fungsi ini akan menyalin konten elemen yang diteruskan ke clipboard (diperbarui dengan saran di komentar dari PointZeroTwo ):

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Begini Cara kerjanya:

1. Membuat bidang teks yang sementara disembunyikan.
2. Menyalin konten elemen ke bidang teks itu.
3. Memilih konten bidang teks.
4. Mengeksekusi perintah copy seperti: document.execCommand("copy").
5. Menghapus bidang teks sementara.

Anda dapat melihat demo cepat di sini:

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

Masalah utamanya adalah tidak semua browser mendukung fitur ini saat ini, tetapi Anda dapat menggunakannya pada yang utama dari:

• Chrome 43
• Internet Explorer 10
• Firefox 41
• Safari 10

Pembaruan 1: Ini dapat dicapai juga dengan solusi JavaScript murni (tanpa jQuery):

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

}

<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />

Perhatikan bahwa kami melewatkan id tanpa # sekarang.

Sebagai madzohan dilaporkan dalam komentar di bawah, ada beberapa masalah aneh dengan versi 64-bit Google Chrome dalam beberapa kasus (menjalankan file secara lokal). Masalah ini tampaknya diperbaiki dengan solusi non-jQuery di atas.

Madzohan mencoba di Safari dan solusinya berhasil tetapi menggunakan document.execCommand('SelectAll')alih-alih menggunakan.select() (sebagaimana ditentukan dalam obrolan dan di komentar di bawah).

Seperti yang ditunjukkan PointZeroTwo dalam komentar , kode dapat ditingkatkan sehingga akan mengembalikan hasil keberhasilan / kegagalan. Anda dapat melihat demo di jsFiddle ini .

UPDATE: COPY MENJAGA FORMAT TEKS

Seperti yang ditunjukkan oleh pengguna dalam StackOverflow versi Spanyol , solusi yang tercantum di atas berfungsi dengan baik jika Anda ingin menyalin konten elemen secara harfiah, tetapi mereka tidak berfungsi dengan baik jika Anda ingin menempelkan teks yang disalin dengan format (seperti itu disalin ke dalam input type="text", formatnya "hilang").

Solusi untuk itu adalah menyalin ke suatu konten yang dapat diedit divdan kemudian menyalinnya dengan execCommandcara yang serupa. Di sini ada contoh - klik pada tombol salin dan kemudian rekatkan ke kotak konten yang dapat diedit di bawah ini:

function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

Dan di jQuery, akan seperti ini:

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}

#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}

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

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

clipboard.js adalah utilitas bagus yang memungkinkan menyalin teks atau data HTML ke clipboard tanpa menggunakan Flash. 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 .

Edit pada Jan 15, 2016: The top jawaban itu diedit hari ini untuk referensi API yang sama dalam jawaban saya diposting pada bulan Agustus 2015. Teks sebelumnya menginstruksikan pengguna untuk menggunakan ZeroClipboard. Hanya ingin menjadi jelas bahwa saya tidak mencabut ini dari jawaban jfriend00, tetapi sebaliknya.

Kesederhanaan adalah kecanggihan tertinggi.
Jika Anda tidak ingin text-to-be-coppied menjadi terlihat:

jQuery:

$('button.copyButton').click(function(){
    $(this).siblings('input.linkToCopy').select();      
    document.execCommand("copy");
});

HTML:

<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;" />

With Line Breaks (Perpanjangan Jawaban dari Alvaro Montoro)

var ClipboardHelper = {

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

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

Anda dapat menggunakan kode ini untuk menyalin nilai input di halaman di Clipboard dengan mengklik tombol

Ini Html

<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
    Copy Input Value
</button>

Kemudian untuk html ini, kita harus menggunakan Kode JQuery ini

function copyToClipboard(element) {
    $(element).select();
    document.execCommand("copy");
}

Ini adalah solusi paling sederhana untuk pertanyaan ini

Pendekatan yang lebih baik tanpa flash atau persyaratan lainnya adalah clipboard.js . Yang perlu Anda lakukan adalah menambahkan data-clipboard-target="#toCopyElement"pada tombol apa pun, menginisialisasi new Clipboard('.btn');dan itu akan menyalin konten DOM dengan idtoCopyElement ke clipboard. Ini adalah cuplikan yang menyalin teks yang disediakan dalam pertanyaan Anda melalui tautan.

Namun satu batasannya adalah tidak berfungsi di safari, tetapi ia bekerja di semua peramban lain termasuk peramban seluler karena tidak menggunakan flash

$(function(){
  new Clipboard('.copy-text');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a>

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="css/index.css" rel="stylesheet" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
        function copy()
        {
            try
            {
                $('#txt').select();
                document.execCommand('copy');
            }
            catch(e)
            {
                alert(e);
            }
        }
    </script>
</head>
<body>
    <h4 align="center">Copy your code</h4>
    <textarea id="txt" style="width:100%;height:300px;"></textarea>
    <br /><br /><br />
    <div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>

<div class="form-group">
    <label class="font-normal MyText">MyText to copy</label>&nbsp;
    <button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>


$(".btnCopy").click(function () {
        var element = $(this).attr("data");
        copyToClipboard($('.' + element));
  });

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

Sangat penting bahwa bidang input tidak memiliki display: none. Browser tidak akan memilih teks dan karenanya tidak akan disalin. Gunakan opacity: 0dengan lebar 0px untuk memperbaiki masalah.

Ini adalah metode paling sederhana untuk menyalin konten

 <div id="content"> Lorepm ispum </div>
 <button class="copy" title="content">Copy Sorce</button>

function SelectContent(element) {
                        var doc = document
                            , text = doc.getElementById(element)
                            , range, selection
                        ;    
                        if (doc.body.createTextRange) {
                            range = document.body.createTextRange();
                            range.moveToElementText(text);
                            range.select();
                        } else if (window.getSelection) {
                            selection = window.getSelection();        
                            range = document.createRange();
                            range.selectNodeContents(text);
                            selection.removeAllRanges();
                            selection.addRange(range);

                        }
                         document.execCommand('Copy');
                    }
                    $(".copy").click(function(){

                         SelectContent( $(this).attr('title'));
                    });

solusi sederhana jQuery.

Harus dipicu oleh klik pengguna.

$("<textarea/>").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();

Anda bisa menggunakan lib ini untuk memudahkan mewujudkan tujuan penyalinan!

https://clipboardjs.com/

Menyalin teks ke clipboard seharusnya tidak sulit. Seharusnya tidak memerlukan lusinan langkah untuk mengonfigurasi atau ratusan KB untuk memuat. Tetapi yang terpenting, itu tidak harus bergantung pada Flash atau kerangka kerja yang membengkak.

Itu sebabnya clipboard.js ada.

atau

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

Pustaka ZeroClipboard menyediakan cara mudah untuk menyalin teks ke clipboard menggunakan film Adobe Flash yang tidak terlihat dan antarmuka JavaScript.

Teks yang akan disalin ada dalam input teks, seperti: <input type="text" id="copyText" name="copyText"> dan, pada tombol klik teks di atas harus disalin ke clipboard, jadi tombolnya seperti: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Script Anda harus seperti:

<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
  moviePath: "ZeroClipboard.swf"
}); 
});

</script>

Untuk file CDN

• (zeroclipboard.swf) :
• (zeroclipboard.js) :

catatan : ZeroClipboard.swfdan ZeroClipboard.js"file harus berada di folder yang sama dengan file Anda menggunakan fungsi ini, ATAU Anda harus memasukkan seperti yang kami sertakan <script src=""></script>di halaman kami.

Sebagian besar jawaban yang diajukan membuat elemen input tersembunyi sementara tambahan. Karena sebagian besar browser saat ini mendukung pengeditan konten div, saya mengusulkan solusi yang tidak membuat elemen tersembunyi, mempertahankan pemformatan teks dan menggunakan pustaka JavaScript atau jQuery murni.

Berikut ini adalah implementasi kerangka minimalis menggunakan baris kode paling sedikit yang dapat saya pikirkan:

//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
  copyUsingPureJS(document.getElementById("copyTarget"));
  alert("Text Copied to Clipboard Using Pure Javascript");
});

function copyUsingPureJS(element_id) {
  element_id.setAttribute("contentEditable", true);
  element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
  element_id.focus();
  document.execCommand("copy");
  element_id.removeAttribute("contentEditable");
  
}

//Jquery:
$(document).ready(function() {
  $("#copyUsingJquery").click(function() {
    copyUsingJquery("#copyTarget");
  });
 

  function copyUsingJquery(element_id) {
    $(element_id).attr("contenteditable", true)
      .select()
      .on("focus", function() {
        document.execCommand('selectAll', false, null)
      })
      .focus()
    document.execCommand("Copy");
    $(element_id).removeAttr("contenteditable");
     alert("Text Copied to Clipboard Using jQuery");
  }
});

#copyTarget {
  width: 400px;
  height: 400px;
  border: 1px groove gray;
  color: navy;
  text-align: center;
  box-shadow: 0 4px 8px 0 gray;
}

#copyTarget h1 {
  color: blue;
}

#copyTarget h2 {
  color: red;
}

#copyTarget h3 {
  color: green;
}

#copyTarget h4 {
  color: cyan;
}

#copyTarget h5 {
  color: brown;
}

#copyTarget h6 {
  color: teal;
}

#pasteTarget {
  width: 400px;
  height: 400px;
  border: 1px inset skyblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
  <h4>Heading 4</h4>
  <h5>Heading 5</h5>
  <h6>Heading 6</h6>
  <strong>Preserve <em>formatting</em></strong>
  <br/>
</div>

<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>

Pustaka Clipboard-polyfill adalah polyfill untuk clipboard asinkron API modern berbasis Promise.

instal di CLI:

npm install clipboard-polyfill 

impor sebagai clipboard dalam file JS

window.clipboard = require('clipboard-polyfill');

contoh

Saya menggunakannya dalam satu bundel dengan require("babel-polyfill");dan mengujinya pada chrome 67. Semua baik untuk produksi.

kode html di sini

    <input id="result" style="width:300px"/>some example text
    <button onclick="copyToClipboard('result')">Copy P1</button>
    <input type="text" style="width:400px" placeholder="Paste here for test" />

KODE JS:

     function copyToClipboard(elementId) {

                      // Create a "hidden" input
                      var aux = document.createElement("input");

                      aux.setAttribute("value", document.getElementById(elementId).value);
                      // Append it to the body
                      document.body.appendChild(aux);
                      // Highlight its content
                      aux.select();
                      // Copy the highlighted text
                      document.execCommand("copy");
                      // Remove it from the body
                      document.body.removeChild(aux);
                    }

Anda dapat menyalin teks terpisah dari teks elemen HTML.

        var copyToClipboard = function (text) {
            var $txt = $('<textarea />');

            $txt.val(text)
                .css({ width: "1px", height: "1px" })
                .appendTo('body');

            $txt.select();

            if (document.execCommand('copy')) {
                $txt.remove();
            }
        };

JS murni, tanpa onclick inline, untuk kelas yang dipasangkan "konten - tombol copy". Akan lebih nyaman, jika Anda memiliki banyak elemen)

(function(){

/* Creating textarea only once, but not each time */
let area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

let content = document.querySelectorAll('.js-content');
let copy    = document.querySelectorAll('.js-copy');

for( let i = 0; i < copy.length; i++ ){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    /* because the classes are paired, we can use the [i] index from the clicked button,
    to get the required text block */
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";

    /* decorative part */
    this.innerHTML = 'Cop<span style="color: red;">ied</span>';
    /* arrow function doesn't modify 'this', here it's still the clicked button */
    setTimeout( () => this.innerHTML = "Copy", 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Dukungan browser yang lebih lama:

(function(){

var area = document.createElement('textarea');
document.body.appendChild( area );
area.style.display = "none";

var content = document.querySelectorAll('.js-content');
var copy    = document.querySelectorAll('.js-copy');

for( var i = 0; i < copy.length; i++ ){
  copyOnClick(i);
}

function copyOnClick(i){
  copy[i].addEventListener('click', function(){
    area.style.display = "block";
    area.value = content[i].innerText;
    area.select();
    document.execCommand('copy');   
    area.style.display = "none";
    
    var t = this;
    t.innerHTML = 'Cop<span style="color: red;">ied</span>';
    setTimeout( function(){
      t.innerHTML = "Copy"
    }, 2000 );
  });
}

})();

hr { margin: 15px 0; border: none; }

<span class="js-content">1111</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">2222</span>
<button class="js-copy">Copy</button>
<hr>
<span class="js-content">3333</span>
<button class="js-copy">Copy</button>

Keduanya akan bekerja seperti pesona :),

JAVASCRIPT:

function CopyToClipboard(containerid) {
if (document.selection) { 
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select().createTextRange();
    document.execCommand("copy"); 

} else if (window.getSelection) {
    var range = document.createRange();
     range.selectNode(document.getElementById(containerid));
     window.getSelection().addRange(range);
     document.execCommand("copy");
     alert("text copied") 
}}

Juga di html,

<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>

<div id="div1" >Text To Copy </div>

<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>

JQUERY: https://paulund.co.uk/jquery-copy-clipboard