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

Aktualisierung 2020: Diese Lösung verwendet execCommand. Während diese Funktion zum Zeitpunkt der Erstellung dieser Antwort in Ordnung war, wird sie nun als veraltet angesehen. Sie funktioniert immer noch in vielen Browsern, aber ihre Verwendung wird aufgrund möglicherweise eingestellter Unterstützung nicht empfohlen.

Es gibt einen weiteren Weg ohne Flash (abgesehen von der Clipboard-API, die in jfriend00's Antwort erwähnt wird). Sie müssen den Text auswählen und dann den Befehl copy ausführen, um den auf der Seite ausgewählten Text in die Zwischenablage zu kopieren.

Zum Beispiel kopiert diese Funktion den Inhalt des übergebenen Elements in die Zwischenablage (aktualisiert mit Vorschlag in den Kommentaren von PointZeroTwo):

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

So funktioniert es:

1. Erstellt ein temporär verstecktes Textfeld.
2. Kopiert den Inhalt des Elements in dieses Textfeld.
3. Selektiert den Inhalt des Textfelds.
4. Führt den Befehl Kopieren aus wie: document.execCommand("copy").
5. Entfernt das temporäre Textfeld.

HINWEIS dass der Innertext des Elements Leerzeichen enthalten kann. Wenn Sie es zum Beispiel für Passwörter verwenden möchten, können Sie den Text trimmen, indem Sie $(element).text().trim() im obigen Code verwenden.

Sie können hier eine schnelle Demo sehen:

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

P1: Ich bin Absatz 1
P2: Ich bin ein zweiter Absatz
Kopieren P1
Kopieren P2

Das Hauptproblem ist, dass nicht alle Browser diese Funktion im Moment unterstützen, aber Sie können sie auf den Hauptbrowsern ab verwenden:

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

---

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

function copyToClipboard(elementId) {

  // Ein "verstecktes" Eingabefeld erstellen
  var aux = document.createElement("input");

  // Weist ihm den Wert des angegebenen Elements zu
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Füge es dem Body hinzu
  document.body.appendChild(aux);

  // Markieren des Inhalts
  aux.select();

  // Kopiere den markierten Text
  document.execCommand("copy");

  // Entferne es vom Body
  document.body.removeChild(aux);

}

P1: Ich bin Absatz 1
P2: Ich bin ein zweiter Absatz
Kopieren P1
Kopieren P2

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

Wie madzohan in den Kommentaren unten berichtet hat, gibt es in einigen Fällen ein seltsames Problem mit der 64-Bit-Version von Google Chrome (lokal ausführen der Datei). Dieses Problem scheint mit der oben genannten nicht-JQuery-Lösung behoben zu sein.

Madzohan hat es in Safari ausprobiert und die Lösung hat funktioniert, benutzt jedoch document.execCommand('SelectAll') anstelle von .select() (wie im Chat und in den Kommentaren unten angegeben).

Wie PointZeroTwo in den Kommentaren verdeutlicht, könnte der Code verbessert werden, so dass er ein Erfolg/Misserfolg Ergebnis zurückgibt. Sie können eine Demo auf diesem jsFiddle sehen.

---

AKTUALISIERUNG: KOPIEREN BEIBEHALTEN DES TEXTFORMATS

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

Eine Lösung dafür wäre, in ein editierbares div zu kopieren und es dann auf ähnliche Weise mithilfe des execCommand zu kopieren. Hier ist ein Beispiel - klicken Sie auf die Kopierschaltfläche und fügen Sie dann in das untenstehende editierbare 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;
}

Fetter Text und unterstrichener Text.
Kopieren mit Format 

Und in jQuery wäre es so:

function copy(selector){
  var $temp = $("

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

Fetter Text und unterstrichener Text.
Kopieren mit Format

Answer 2

Bearbeitungsstand 2016

Ab 2016 können Sie in den meisten Browsern Text in die Zwischenablage kopieren, da die meisten Browser die Möglichkeit haben, eine Auswahl von Text programmgesteuert mit document.execCommand("copy") aufgrund einer Auswahl in die Zwischenablage zu kopieren.

Genau wie bei einigen anderen Aktionen in einem Browser (wie das Öffnen eines neuen Fensters) kann das Kopieren in die Zwischenablage nur über eine spezifische Benutzeraktion (wie einen Mausklick) erfolgen. Zum Beispiel kann es nicht über einen Timer erfolgen.

Hier ist ein Codebeispiel:

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

function copyToClipboard(elem) {
      // verstecktes Textelement erstellen, falls es noch nicht existiert
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // kann einfach das Original-Quellelement für die Auswahl und Kopie verwenden
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // muss ein temporäres Formularelement für die Auswahl und Kopie verwenden
        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;
    }
    // Inhalt auswählen
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);

    // Auswahl kopieren
    var succeed;
    try {
          succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // ursprünglichen Fokus wiederherstellen
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }

    if (isInput) {
        // ursprüngliche Auswahl wiederherstellen
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // temporären Inhalt löschen
        target.textContent = "";
    }
    return succeed;
}

input {
  width: 400px;
}

 Kopieren

---

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

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

---

Alter, historischer Teil der Antwort

Das direkte Kopieren in die Zwischenablage über JavaScript ist aus Sicherheitsgründen in keinem modernen Browser erlaubt. Der häufigste Workaround besteht darin, eine Flash-Funktion zu verwenden, die das Kopieren in die Zwischenablage ermöglicht und nur durch einen direkten Benutzerklick ausgelöst werden kann.

Wie bereits erwähnt, ist ZeroClipboard ein beliebtes Code-Set zum Verwalten des Flash-Objekts zum Kopieren. Ich habe es verwendet. Wenn Flash auf dem Gerät installiert ist (was mobile oder Tabletten ausschließt), funktioniert es.

---

Der nächste gängigste Workaround besteht darin, den für die Zwischenablage bestimmten Text einfach in ein Eingabefeld zu platzieren, den Fokus auf dieses Feld zu verschieben und den Benutzer darauf hinzuweisen, Strg + C zu drücken, um den Text zu kopieren.

Weitere Diskussionen zum Thema und mögliche Workarounds finden Sie in diesen früheren Beiträgen auf Stack Overflow:

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

---

Fragen, die nach einer modernen Alternative zur Verwendung von Flash fragen, haben viele Upvotes erhalten, jedoch keine Antworten mit einer Lösung (wahrscheinlich weil keine existiert):

• HTML5-Alternative zu Flash-basiertem ZeroClipboard für sicheres Kopieren von Daten in die Zwischenablage?

• Kopieren in die Zwischenablage ohne Flash

---

Internet Explorer und Firefox hatten früher nicht standardisierte APIs zum Zugriff auf die Zwischenablage, aber in ihren moderneren Versionen wurden diese Methoden deprecated (wahrscheinlich aus Sicherheitsgründen).

---

Es gibt einen aufstrebenden Standardisierungsversuch, um eine "sichere" Lösung für die gängigsten Probleme mit der Zwischenablage zu finden (wahrscheinlich eine spezifische Benutzeraktion wie bei der Flash-Lösung erforderlich), und es sieht so aus, als ob dies in den neuesten Versionen von Firefox und Chrome teilweise implementiert ist, aber das habe ich noch nicht bestätigt.

Answer 3

Jan 2023

Ab 2023 sollten Sie die Clipboard API verwenden.

navigator.clipboard.writeText('Hier den zu kopierenden Text eingeben').then(function () {
    alert('Es hat funktioniert! Führen Sie einen STRG-V aus, um einzufügen')
}, function () {
    alert('Fehler beim Kopieren. Überprüfen Sie die Berechtigungen für die Zwischenablage')
});

Hier finden Sie weitere Informationen zum Interagieren mit der Zwischenablage

Answer 4

Juni 2022

Aktualisierung: Der richtige Weg, um dies heutzutage zu tun, ist mit der Clipboard-API.

Zum Beispiel:

// Text aus dem DOM-Element erhalten:
const textToCopy = document.querySelector('.content').innerText

// Wenn jemand auf das Element  klickt
// (das ein 

Das ist alles.

Wenn Sie sich die Lösung ansehen möchten, bevor die Clipboard-API eingeführt wurde (heutzutage nicht mehr empfehlenswert):

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

HTML:

hier klicken zum Kopieren

Answer 5

clipboard.js ist ein nützliches Dienstprogramm, das das Kopieren von Text oder HTML-Daten in die Zwischenablage ohne Verwendung von Flash ermöglicht. Es ist sehr einfach zu verwenden; fügen Sie einfach die .js ein und verwenden Sie so etwas:

Kopierknopf

    document.getElementById('markup-copy').addEventListener('click', function() {
        clipboard.copy({
            'text/plain': 'Markup-Text. Fügen Sie mich in einen Rich-Text-Editor ein.',
            'text/html': '<i>hier</i> ist etwas <b>Rich-Text</b>'
        }).then(
            function(){console.log('Erfolg'); },
            function(err){console.log('Fehler', err);
        });
    });

clipboard.js ist auch auf GitHub.

Bearbeitet am 15. Januar 2016: Die top Antwort wurde heute bearbeitet, um auf die gleiche API in meiner im August 2015 veröffentlichten Antwort zu verweisen. Der vorherige Text wies Benutzer an, ZeroClipboard zu verwenden. Möchte nur klarstellen, dass ich das nicht aus jfriend00's Antwort herausgerissen habe, sondern genau andersherum.