Klicken Sie auf die Schaltfläche, um in die Zwischenablage zu kopieren.

Question

Wie kann ich den Text innerhalb einer div in die Zwischenablage kopieren? Ich habe eine div und muss einen Link hinzufügen, der den Text in die Zwischenablage kopiert. Gibt es eine Lösung dafür?

Lorem Ipsum ist einfach nur Blindtext aus der Druck- und Setzindustrie. Lorem Ipsum ist seit den 1500er Jahren der Standard-Blindtext der Branche

Text kopieren

Nachdem ich auf Text kopieren geklickt habe, muss ich dann Strg + V drücken, um ihn einzufügen.

Answer 1

Mit Zeilenumbrüchen (Erweiterung der Antwort von Alvaro Montoro)

var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Zeilenumbrüche mit \n
    {
        var $tempInput =  $("");
        $("body").append($tempInput);
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

ClipboardHelper.copyText('Hallo\nWelt');
ClipboardHelper.copyElement($('body h1').first());
</code></pre></x-turndown>

Answer 2

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

Ein Nachteil ist jedoch, dass es nicht auf Safari funktioniert, aber es funktioniert auf allen anderen Browsern, einschließlich mobiler Browser, da es kein Flash verwendet.

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

Lorem Ipsum ist einfach ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit den 1500er Jahren der Standard-Blindtext der Branche

Text kopieren

Answer 3

    Zu kopierender Text 
    Kopieren

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

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

Answer 4

JQuery einfache Lösung.

Sollte durch Klick des Benutzers ausgelöst werden.

$("").appendTo("body").val(text).select().each(function () {
            document.execCommand('copy');
        }).remove();
</code></pre></x-turndown>

Answer 5

Sie können diesen Code verwenden, um den Eingabewert auf der Seite in die Zwischenablage zu kopieren, indem Sie auf eine Schaltfläche klicken

Dies ist Html

    Eingabewert kopieren

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