Div içindeki metni panoya nasıl kopyalarım? Bir div var ve panoya metin ekleyecek bir bağlantı eklemeniz gerekir. Bunun için bir çözüm var mı?

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

Metni kopyala'yı tıklattıktan sonra Ctrl+ tuşuna basıyorum V, yapıştırılması gerekir.

2016 itibarıyla düzenleme

2016'dan itibaren, çoğu tarayıcıda metni panoya kopyalayabilirsiniz, çünkü çoğu tarayıcı bir seçim dışında çalışarak bir metin seçimini panoya programlı olarak kopyalama yeteneğine sahiptir document.execCommand("copy").

Bir tarayıcıdaki diğer bazı işlemlerde olduğu gibi (yeni bir pencere açmak gibi) panoya kopyalama yalnızca belirli bir kullanıcı eylemiyle (fare tıklaması gibi) yapılabilir. Örneğin, bir zamanlayıcı ile yapılamaz.

İşte bir kod örneği:

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">

İşte biraz daha gelişmiş demo: https://jsfiddle.net/jfriend00/v9g1x0o6/

Ayrıca, clipboard.js ile bunu sizin için yapan önceden oluşturulmuş bir kitaplık da alabilirsiniz .

Cevabın eski, tarihsel kısmı

Güvenlik nedeniyle herhangi bir modern tarayıcı tarafından JavaScript'e doğrudan panoya kopyalanmasına izin verilmez. En yaygın çözüm, panoya kopyalamak için yalnızca doğrudan kullanıcı tıklamasıyla tetiklenebilen bir Flash özelliği kullanmaktır.

Daha önce de belirtildiği gibi, ZeroClipboard , kopyayı yapmak için Flash nesnesini yönetmek için popüler bir kod kümesidir. Ben kullandım. Tarama aygıtına (mobil veya tableti hariç tutan) Flash yüklüyse çalışır.

Bir sonraki en yaygın çözüm, panoya bağlı metni bir giriş alanına yerleştirmek, odağı bu alana taşımak ve kullanıcıya metni kopyalamak için Ctrl+ tuşuna basmasını tavsiye etmektir C.

Konuyla ilgili diğer tartışmalar ve olası çözüm yolları, bu önceki Stack Overflow yayınlarında bulunabilir:

• JavaScript'te panoya nasıl kopyalayabilirim?

• JQuery kullanarak istemcinin panosuna metin kopyalamak nasıl?

• Flash olmadan panoya nasıl kopyalayabilirsiniz?

Flash'ı kullanmak için modern bir alternatif isteyen bu sorular, birçok soru upvotes aldı ve bir çözümle cevap vermedi (muhtemelen hiçbiri mevcut olmadığı için):

• Verilerin panoya güvenli kopyalanması için flash tabanlı ZeroClipboard'a HTML5 alternatifi mi?

• Flash olmadan panoya kopyala

Internet Explorer ve Firefox, panoya erişmek için standart olmayan API'lara sahipti, ancak daha modern sürümleri bu yöntemleri kullanımdan kaldırmıştır (muhtemelen güvenlik nedeniyle).

En yaygın pano sorunlarını çözmek için "güvenli" bir yol bulmaya çalışmak için yeni bir standart çabası vardır (muhtemelen Flash çözümü gerektirdiği gibi belirli bir kullanıcı eylemi gerektirir) ve en son olarak kısmen uygulanabilir gibi görünüyor Firefox ve Chrome sürümleri, ancak henüz onaylamadım.

Güncelleme 2020 : Bu çözüm kullanır execCommand. Bu özellik bu cevabı yazarken iyiyken, artık kullanılmıyor . Yine de birçok tarayıcıda çalışacaktır, ancak destek bırakılabileceği için kullanımı önerilmez.

Flash olmayan başka bir yol daha var ( jfriend00'ün cevabında belirtilen Pano API'sının dışında ). Metni seçmeniz ve ardından sayfada seçili olan metni panoya kopyalamak için komutu yürütmeniz gerekir .copy

Örneğin, bu işlev iletilen öğenin içeriğini panoya kopyalar ( PointZeroTwo'daki yorumlarda öneriyle güncellenir ):

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

Bu nasıl çalışır:

1. Geçici olarak gizlenmiş bir metin alanı oluşturur.
2. Öğenin içeriğini o metin alanına kopyalar.
3. Metin alanının içeriğini seçer.
4. Gibi komut kopyasını çalıştırır: document.execCommand("copy").
5. Geçici metin alanını kaldırır.

Hızlı bir demo burada görebilirsiniz:

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" />

Ana sorun şu anda tüm tarayıcıların bu özelliği desteklememesi , ancak ana özelliklerde şu özelliklerden kullanabilmeniz:

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

Güncelleme 1: Bu, saf bir JavaScript çözümü ile de elde edilebilir (jQuery yok):

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" />

Kimliği # olmadan geçirdiğimize dikkat edin.

As madzohan aşağıdaki yorum bildirilen bazı durumlarda (dosyayı yerel olarak çalıştıran) Google Chrome 64 bit sürümü ile bazı garip sorun vardır. Bu sorun yukarıdaki jQuery dışı çözüm ile giderilmiş gibi görünüyor.

Madzohan Safari'de denedi ve çözüm işe yaradı ama kullanmak document.execCommand('SelectAll')yerine kullanmak .select()(sohbette ve aşağıdaki yorumlarda belirtildiği gibi).

As PointZeroTwo yorumlarda işaret bunu bir başarı / başarısızlık sonucunu dönecekti böylece, kod geliştirilebilir. Bu jsFiddle'da bir demo görebilirsiniz .

GÜNCELLEME: METİN FORMATINI KOPYALAMA

Bir kullanıcının StackOverflow'un İspanyolca sürümünde işaret ettiği gibi, bir öğenin içeriğini tam anlamıyla kopyalamak istiyorsanız, yukarıda listelenen çözümler mükemmel çalışır, ancak kopyalanan metni formata yapıştırmak istiyorsanız ( içine kopyalanır input type="text", biçim "kaybolur").

Bunun için bir çözüm, düzenlenebilir bir içeriğe divkopyalayıp execCommandbenzer şekilde kullanarak kopyalamak olacaktır . Burada bir örnek var - kopyala düğmesini tıklayın ve ardından aşağıdaki içerik düzenlenebilir kutusuna yapıştırın:

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>

Ve jQuery'de şöyle olur:

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 , metin veya HTML verilerinin Flash kullanılmadan panoya kopyalanmasını sağlayan güzel bir yardımcı programdır. Kullanımı çok kolay; sadece .js'yi ekleyin ve böyle bir şey kullanın:

<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 ayrıca GitHub'da .

15 Ocak 2016'da düzenleyin : En yüksek yanıt bugün, Ağustos 2015'te yayınladığım yanıta aynı API'ya başvurmak üzere düzenlendi . Önceki metin, kullanıcılara ZeroClipboard'u kullanma talimatını veriyordu. Sadece bunu jfriend00'ün cevabından değil, tersine çekmediğimi netleştirmek istiyorum.

Sadelik nihai karmaşıklıktır.
Kopyalanacak metnin görünür olmasını istemiyorsanız:

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;" />

Satır Kesmeleriyle (Alvaro Montoro'dan Yanıtın Uzatılması)

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

Bu kodu, bir düğmeyi tıklayarak Pano'daki sayfadaki giriş değerini kopyalamak için kullanabilirsiniz

Bu 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>

Sonra bu html için, bu JQuery Kodunu kullanmalıyız

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

Bu soru için en basit çözüm

Flaş veya başka herhangi bir gereksinim olmadan daha iyi bir yaklaşım clipboard.js'dir . Tek yapmanız gereken data-clipboard-target="#toCopyElement"herhangi bir düğmeye eklemek , başlatmak new Clipboard('.btn');ve DOM içeriğini id ile kopyalamaktırtoCopyElement panoya . Bu, sorunuzda sağlanan metni bir bağlantı aracılığıyla kopyalayan bir snippet'tir.

Bir sınırlama, safari üzerinde çalışmadığı, ancak flaş kullanmadığı için mobil tarayıcılar da dahil olmak üzere diğer tüm tarayıcılarda çalıştığıdır.

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

Giriş alanının olmaması çok önemlidir display: none. Tarayıcı metni seçmez ve bu nedenle kopyalanmaz. opacity: 0Sorunu çözmek için 0 piksel genişliğinde kullanın .

İçeriği kopyalamak için en basit yöntem

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

jQuery basit bir çözüm.

Kullanıcının tıklamasıyla tetiklenmelidir.

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

kopyalama hedefini kolayca gerçekleştirmek için bu lib'i kullanabilirsiniz!

https://clipboardjs.com/

Metni panoya kopyalamak zor olmamalıdır. Yapılandırmak için düzinelerce adım veya yüklemek için yüzlerce KB gerektirmemelidir. Ancak en önemlisi, Flash'a veya şişmiş bir çerçeveye bağlı olmamalıdır.

İşte bu yüzden clipboard.js var.

veya

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

ZeroClipboard kütüphanesi, görünmez bir Adobe Flash filmi ve bir JavaScript arayüzü kullanarak panoya metin kopyalamanın kolay bir yolunu sunar.

Kopyalanacak metin, aşağıdaki gibi metin girişindedir: <input type="text" id="copyText" name="copyText"> ve yukarıdaki butona tıklandığında metnin panoya kopyalanması gerekir, bu yüzden düğme şöyle: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Komut dosyanız şöyle olmalıdır:

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

</script>

CDN dosyaları için

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

not : ZeroClipboard.swfve ZeroClipboard.js"dosya, bu işlevi kullanan dosyanızla aynı klasörde olmalıdır, VEYA <script src=""></script>sayfalarımıza eklediğimiz gibi eklemeniz gerekir .

Önerilen cevapların çoğu fazladan geçici bir gizli girdi öğesi (elemanları) oluşturur. Günümüzde çoğu tarayıcı div içerik düzenlemeyi desteklediğinden, gizli öğe (ler) oluşturmayan, metin biçimlendirmesini koruyan ve saf JavaScript veya jQuery kitaplığı kullanmayan bir çözüm öneriyorum.

İşte aklıma gelen en az kod satırı kullanarak minimalist bir iskelet uygulaması:

//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>

Pano-çoklu dolgu kütüphanesi, modern Promise tabanlı eşzamansız pano API'sı için bir çoklu dolgudur.

CLI'ye yükle:

npm install clipboard-polyfill 

JS dosyasına pano olarak içe aktar

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

misal

Ben require("babel-polyfill");67 ile krom bir paket içinde kullanıyorum ve test. Hepsi üretim için iyi.

html kodu buraya

    <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" />

JS KODU:

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

HTML öğesinin metninin dışında tek bir metni kopyalayabilirsiniz.

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

Saf JS, satır içi onclick olmadan, eşleştirilmiş sınıflar için "içerik - kopyala düğmesi". Birçok unsurunuz varsa daha rahat olurdu)

(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>

Eski tarayıcı desteği:

(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>

Her ikisi de bir cazibe gibi çalışır :),

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") 
}}

Ayrıca html biçiminde,

<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