Wie kopiere ich den Text in einem Div in die Zwischenablage? Ich habe ein div und muss einen Link hinzufügen, der den Text zur Zwischenablage hinzufügt. Gibt es dafür eine Lösung?

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

Nachdem ich auf Text kopieren geklickt und dann Ctrl+ Vgedrückt habe, muss dieser eingefügt werden.

Ab 2016 bearbeiten

Ab 2016 können Sie jetzt in den meisten Browsern Text in die Zwischenablage kopieren, da die meisten Browser die Möglichkeit haben, eine Textauswahl programmgesteuert in die Zwischenablage zu kopieren, wobei eine Auswahl document.execCommand("copy")funktioniert.

Wie bei einigen anderen Aktionen in einem Browser (z. B. beim Öffnen eines neuen Fensters) kann das Kopieren in die Zwischenablage nur über eine bestimmte Benutzeraktion (z. B. einen Mausklick) erfolgen. Dies kann beispielsweise nicht über einen Timer erfolgen.

Hier ist ein Codebeispiel:

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

Hier ist eine etwas fortgeschrittenere Demo: https://jsfiddle.net/jfriend00/v9g1x0o6/

Und Sie können auch eine vorgefertigte Bibliothek erhalten , die dies mit für Sie tut clipboard.js .

Alter, historischer Teil der Antwort

Das direkte Kopieren in die Zwischenablage über JavaScript ist aus Sicherheitsgründen von keinem modernen Browser gestattet. Die häufigste Problemumgehung besteht darin, eine Flash-Funktion zum Kopieren in die Zwischenablage zu verwenden, die nur durch einen direkten Benutzerklick ausgelöst werden kann.

Wie bereits erwähnt, ist ZeroClipboard ein beliebter Codesatz zum Verwalten des Flash-Objekts zum Kopieren. Ich habe es benutzt. Wenn Flash auf dem Browsing-Gerät installiert ist (was Mobilgeräte oder Tablets ausschließt), funktioniert es.

Die nächsthäufigste Problemumgehung besteht darin, den an die Zwischenablage gebundenen Text einfach in ein Eingabefeld zu platzieren, den Fokus auf dieses Feld zu verschieben und den Benutzer anzuweisen, Ctrl+ Czu drücken, um den Text zu kopieren.

Weitere Diskussionen zu diesem Problem und möglichen Problemumgehungen finden Sie in diesen früheren Stack Overflow-Beiträgen:

• Wie kopiere ich in JavaScript in die Zwischenablage?

• Wie kopiere ich Text mit jQuery in die Zwischenablage des Clients?

• Wie können Sie ohne Flash in die Zwischenablage kopieren?

Diese Fragen, die nach einer modernen Alternative zur Verwendung von Flash fragen, haben viele Fragen und keine Antworten mit einer Lösung erhalten (wahrscheinlich, weil es keine gibt):

• HTML5-Alternative zum Flash-basierten ZeroClipboard zum sicheren Kopieren von Daten in die Zwischenablage?

• Ohne Flash in die Zwischenablage kopieren

Internet Explorer und Firefox verfügten früher über nicht standardmäßige APIs für den Zugriff auf die Zwischenablage, aber ihre moderneren Versionen haben diese Methoden (wahrscheinlich aus Sicherheitsgründen) abgelehnt.

Es gibt eine aufkommende Standardanstrengung, um zu versuchen, einen "sicheren" Weg zu finden, um die häufigsten Probleme in der Zwischenablage zu lösen (wahrscheinlich ist eine bestimmte Benutzeraktion erforderlich, wie es die Flash-Lösung erfordert), und es sieht so aus, als ob sie teilweise in der neuesten Version implementiert werden könnte Versionen von Firefox und Chrome, aber das habe ich noch nicht bestätigt.

Update 2020 : Diese Lösung verwendet execCommand. Während diese Funktion zum Zeitpunkt des Schreibens dieser Antwort in Ordnung war, gilt sie jetzt als veraltet . Es funktioniert weiterhin in vielen Browsern, von seiner Verwendung wird jedoch abgeraten, da die Unterstützung möglicherweise eingestellt wird.

Es gibt noch einen anderen Nicht-Flash-Weg (abgesehen von der in der Antwort von jfriend00 erwähnten Zwischenablage-API ). Sie müssen den Text auswählen und dann den Befehl ausführen , um den aktuell auf der Seite ausgewählten Text in die Zwischenablage zu kopieren.copy

Diese Funktion kopiert beispielsweise den Inhalt des übergebenen Elements in die Zwischenablage (aktualisiert mit Vorschlägen in den Kommentaren von PointZeroTwo ):

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

So funktioniert es:

1. Erstellt ein vorübergehend ausgeblendetes Textfeld.
2. Kopiert den Inhalt des Elements in dieses Textfeld.
3. Wählt den Inhalt des Textfelds aus.
4. Führt die Befehlskopie wie folgt aus : document.execCommand("copy").
5. Entfernt das temporäre Textfeld.

Eine kurze Demo finden Sie hier:

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

Das Hauptproblem ist, dass derzeit nicht alle Browser diese Funktion unterstützen , aber Sie können sie für die Hauptbrowser verwenden von:

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

Update 1: Dies kann auch mit einer reinen JavaScript-Lösung (keine jQuery) erreicht werden:

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

Beachten Sie, dass wir die ID jetzt ohne das # übergeben.

Wie Madzohan in den Kommentaren unten berichtete, gibt es in einigen Fällen ein seltsames Problem mit der 64-Bit-Version von Google Chrome ( lokale Ausführung der Datei). Dieses Problem scheint mit der oben genannten Nicht-jQuery-Lösung behoben zu sein.

Madzohan hat es in Safari versucht und die Lösung hat funktioniert, aber verwendet document.execCommand('SelectAll')statt verwendet .select()(wie im Chat und in den Kommentaren unten angegeben).

Wie PointZeroTwo in den Kommentaren hervorhebt , könnte der Code verbessert werden, sodass ein Erfolgs- / Fehlerergebnis zurückgegeben wird . Sie können eine Demo auf dieser jsFiddle sehen .

UPDATE: KOPIEREN SIE DAS TEXTFORMAT

Wie ein Benutzer in der spanischen Version von StackOverflow betont hat , funktionieren die oben aufgeführten Lösungen perfekt, wenn Sie den Inhalt eines Elements buchstäblich kopieren möchten, aber sie funktionieren nicht so gut, wenn Sie den kopierten Text mit Format (as) einfügen möchten es wird in ein kopiert input type="text", das Format ist "verloren").

Eine Lösung hierfür wäre, in einen bearbeitbaren Inhalt zu kopieren divund ihn dann execCommandauf ähnliche Weise mit dem zu kopieren . Hier ist ein Beispiel: Klicken Sie auf die Schaltfläche "Kopieren" und fügen Sie es in das unten stehende bearbeitbare Feld ein:

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>

Und in jQuery wäre es so:

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 ist ein nettes Dienstprogramm, mit dem Sie Text- oder HTML-Daten ohne Verwendung von Flash in die Zwischenablage kopieren können. Es ist sehr einfach zu bedienen; Fügen Sie einfach die .js hinzu und verwenden Sie Folgendes:

<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 ist auch auf GitHub .

Bearbeiten am 15. Januar 2016: Die Top-Antwort wurde heute bearbeitet, um auf dieselbe API in meiner Antwort vom August 2015 zu verweisen. Der vorherige Text wies Benutzer an, ZeroClipboard zu verwenden. Ich möchte nur klarstellen, dass ich dies nicht aus der Antwort von jfriend00 herausgerissen habe, sondern umgekehrt.

Einfachheit ist die entscheidende Kultiviertheit.
Wenn Sie nicht möchten, dass der zu kopierende Text sichtbar ist:

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

Mit Zeilenumbrüchen (Erweiterung der Antwort von 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());

Sie können diesen Code zum Kopieren des Eingabewerts in die Seite in der Zwischenablage verwenden, indem Sie auf eine Schaltfläche klicken

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

Dann müssen wir für dieses HTML diesen JQuery-Code verwenden

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

Dies ist die einfachste Lösung für diese Frage

Ein noch besserer Ansatz ohne Flash oder andere Anforderungen ist clipboard.js . Alles, was Sie tun müssen, ist, eine data-clipboard-target="#toCopyElement"beliebige Schaltfläche hinzuzufügen , zu initialisieren new Clipboard('.btn');und den Inhalt von DOM mit der ID toCopyElementin die Zwischenablage zu kopieren . Dies ist ein Ausschnitt, der den in Ihrer Frage angegebenen Text über einen Link kopiert.

Eine Einschränkung ist jedoch, dass es nicht auf Safari funktioniert, sondern auf allen anderen Browsern, einschließlich mobilen Browsern, da kein Flash verwendet wird

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

Es ist sehr wichtig, dass das Eingabefeld nicht hat display: none. Der Browser wählt den Text nicht aus und wird daher nicht kopiert. Verwenden Sie diese opacity: 0Option mit einer Breite von 0 Pixel, um das Problem zu beheben.

Es ist die einfachste Methode, den Inhalt zu kopieren

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

einfache jQuery-Lösung.

Sollte durch Klicken des Benutzers ausgelöst werden.

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

Sie können einfach diese Bibliothek verwenden, um das Kopierziel einfach zu verwirklichen!

https://clipboardjs.com/

Das Kopieren von Text in die Zwischenablage sollte nicht schwierig sein. Es sollten nicht Dutzende von Schritten zum Konfigurieren oder Hunderte von KB zum Laden erforderlich sein. Vor allem aber sollte es nicht von Flash oder einem aufgeblähten Framework abhängen.

Deshalb gibt es clipboard.js.

oder

https://github.com/zeroclipboard/zeroclipboard

http://zeroclipboard.org/

Die ZeroClipboard-Bibliothek bietet eine einfache Möglichkeit, Text mithilfe eines unsichtbaren Adobe Flash-Films und einer JavaScript-Oberfläche in die Zwischenablage zu kopieren.

Der zu kopierende Text befindet sich in der Texteingabe wie: <input type="text" id="copyText" name="copyText"> Wenn Sie auf die Schaltfläche klicken, sollte der Text in die Zwischenablage kopiert werden. Die Schaltfläche lautet also wie folgt: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Ihr Skript sollte wie folgt aussehen:

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

</script>

Für CDN-Dateien

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

Hinweis : ZeroClipboard.swfund ZeroClipboard.js"Die Datei sollte sich im selben Ordner befinden wie Ihre Datei, die diese Funktion verwendet. ODER Sie müssen angeben, wie wir es <script src=""></script>auf unseren Seiten angeben.

Die meisten der vorgeschlagenen Antworten erstellen zusätzliche temporäre versteckte Eingabeelemente. Da die meisten Browser heutzutage die Bearbeitung von Div-Inhalten unterstützen, schlage ich eine Lösung vor, die keine versteckten Elemente erstellt, die Textformatierung beibehält und reine JavaScript- oder jQuery-Bibliothek verwendet.

Hier ist eine minimalistische Skelettimplementierung mit den wenigsten Codezeilen, die mir einfallen:

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

Die Zwischenablage-Polyfill- Bibliothek ist eine Polyfill für die moderne Promise-basierte asynchrone Zwischenablage-API.

In CLI installieren:

npm install clipboard-polyfill 

als Zwischenablage in JS-Datei importieren

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

Beispiel

Ich verwende es in einem Bundle mit require("babel-polyfill");und teste es auf Chrom 67. Alles gut für die Produktion.

HTML-Code hier

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

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

Sie können einen einzelnen Text neben dem Text eines HTML-Elements kopieren.

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

Pure JS ohne Inline-Onclick für gepaarte Klassen "content - copy button". Wäre bequemer, wenn Sie viele Elemente haben)

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

Unterstützung für ältere Browser:

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

Beides wird wie ein Zauber wirken :),

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

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