Klicken Sie auf die Schaltfläche Kopieren in die Zwischenablage mit jQuery

Es gibt einen anderen Nicht-Flash-Weg (abgesehen von der Clipboard-API , die in jfriend00s Antwort genannt wird). Sie müssen den Text auswählen und dann führen Sie den Befehl copy aus, um den aktuell auf der Seite ausgewählten Text in die Zwischenablage zu kopieren.

Diese Funktion kopiert beispielsweise den Inhalt des übergebenen Elements in die Zwischenablage (aktualisiert mit Vorschlag 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 temporäres 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.

Sie können eine kurze Demo hier sehen:

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 es für die Hauptbrowser verwenden:

• 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 # übergeben.

Wie madzohan in den Kommentaren unten berichtet, gibt es in einigen Fällen einige seltsame Probleme mit der 64-Bit-Version von Google Chrome (wobei die Datei lokal ausgeführt wird). Dieses Problem scheint mit der oben genannten Nicht-jQuery-Lösung behoben zu sein.

Madzohan versuchte es in Safari und die Lösung funktionierte, aber document.execCommand('SelectAll') anstelle von .select() (wie im Chat und in den Kommentaren unten angegeben).

Wie PointZeroTwo in den Kommentaren darauf hinweist könnte der Code verbessert werden, so dass ein Erfolg/Misserfolg resultiert. Sie können eine Demo auf this jsFiddle sehen.

UPDATE: COPY BEHALTEN DAS TEXTFORMAT

Wie ein Benutzer in der spanischen Version von StackOverflow hervorgehoben hat, funktionieren die oben aufgeführten Lösungen perfekt, wenn Sie den Inhalt eines Elements wörtlich kopieren möchten. Sie funktionieren jedoch nicht so gut, wenn Sie den kopierten Text einfügen mit Format (da es in einen input type="text" kopiert wird, geht das Format "verloren").

Eine Lösung dafür wäre, in einen editierbaren div-Inhalt zu kopieren und ihn dann auf ähnliche Weise mit der execCommand-Datei zu kopieren. Hier ist ein Beispiel - klicken Sie auf die Schaltfläche "Kopieren" und fügen Sie sie in das unten 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 Dienstprogramm von Nice, das das Kopieren von Text- oder HTML-Daten in die Zwischenablage ohne Verwendung von Flash ermöglicht. Es ist sehr einfach zu bedienen. Fügen Sie einfach die JS-Dateien 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 beste Antwort wurde bearbeitet heute, um auf dasselbe API in meiner im August 2015 veröffentlichten Antwort zu verweisen. Im vorherigen Text wurden Benutzer aufgefordert, ZeroClipboard zu verwenden. Ich möchte nur klarstellen, dass ich dies nicht aus jfriend00s Antwort gerissen habe, eher umgekehrt. 

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

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

Eine Einschränkung ist jedoch, dass es auf Safari nicht funktioniert, aber es funktioniert mit allen anderen Browsern, einschließlich mobilen Browsern, da es keinen Flash verwendet

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

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

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

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

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

Sie können diesen Code zum Kopieren des Eingabewerts auf der 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 diesen HTML-Code diesen JQuery-Code verwenden

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

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

Sie können diese Lib einfach verwenden, um das Kopierziel zu erreichen!

https://clipboardjs.com/

Das Kopieren von Text in die Zwischenablage sollte nicht schwer sein. Es sollte nicht erforderlich sein Dutzende Schritte zum Konfigurieren oder Hunderte von KBs zum Laden. Aber die meisten von Alles sollte 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 in die .__ zu kopieren. Zwischenablage mit einem unsichtbaren Adobe Flash-Film und einem JavaScript Schnittstelle.

Der zu kopierende Text wird in Texteingabe geschrieben, beispielsweise: <input type="text" id="copyText" name="copyText">. Wenn Sie auf die Schaltfläche klicken, wird der Text in die Zwischenablage kopiert. Die Schaltfläche ist also wie folgt: <button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button> Ihr Skript sollte folgendermaßen 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) : 

note: ZeroClipboard.swf und ZeroClipboard.js "Die Datei sollte sich im selben Ordner befinden wie die Datei, in der diese Funktion verwendet wird. OR müssen Sie so einfügen, wie wir <script src=""></script> auf unseren Seiten verwenden.

jQuery einfache Lösung.

Sollte durch Klick des Benutzers ausgelöst werden.

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

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

Beide funktionieren wie ein Zauber :),

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

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

Clipboard-polyfill library ist eine Polyfill für die moderne Promise-basierte asynchrone Zwischenablage-API.

in CLI installieren:

npm install clipboard-polyfill 

import als Zwischenablage in JS-Datei

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

Beispiel

Ich verwende es in einem Paket mit require("babel-polyfill"); und habe es auf Chrome 67 getestet. Alles gut für die Produktion.

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

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

Hier ist eine minimalistische Skelett-Implementierung mit den wenigsten Codezeilen, die ich mir vorstellen kann:

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