Wie kopiere ich in JavaScript in die Zwischenablage?

Lesezeit: 7 Minuten

Santiago Corredoira

Was ist der beste Weg, um Text in die Zwischenablage zu kopieren (Multi-Browser)?

Ich habe versucht:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);
        clipboardHelper.copyString(text);
    }
}

Aber im Internet Explorer gibt es einen Syntaxfehler. Bei Firefox heißt es unsafeWindow ist nicht definiert.

Ein netter Trick ohne Verwendung Blinken: Wie greift Trello auf die Zwischenablage des Benutzers zu?

Nur neugierig, was möchten Sie in die Zwischenablage kopieren, was der Benutzer nicht selbst tun kann?

– Schnauze

30. Dezember 2008 um 16:52 Uhr
Nichts Besonderes. Sie können es selbst tun, aber ich möchte auch die Möglichkeit bieten, auf eine Schaltfläche zu klicken, ohne sich Gedanken über die Auswahl des richtigen Textabschnitts machen zu müssen.

– Santiago Corredoira

31. Dezember 2008 um 0:03 Uhr
Dieser lange Blogbeitrag enthält viele Möglichkeiten, dies zu tun: Zugriff auf die System-Zwischenablage mit JavaScript – ein heiliger Gral?

– Aaron Digulla

21. April 2011 um 8:26 Uhr
Es gibt eine undefinierte Browser-Ausnahme sowohl in IE als auch in FF

– Jagadeisch

22. Februar 2013 um 7:43 Uhr
Wenn wir Text in die Zwischenablage des Benutzers einfügen können, können wir seine Zwischenablage ruinieren.

– Frank Fang

11. Juni 2014 um 12:15 Uhr

Jarek Milewski

Das automatische Kopieren in die Zwischenablage kann gefährlich sein und wird daher von den meisten Browsern (außer Internet Explorer) sehr erschwert. Ich persönlich verwende den folgenden einfachen Trick:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

Dem Benutzer wird die Eingabeaufforderungsbox präsentiert, in der der zu kopierende Text bereits ausgewählt ist. Jetzt reicht es zu drücken Strg + C und Eingeben (um die Kiste zu schließen) – und voila!

Jetzt ist der Kopiervorgang aus der Zwischenablage sicher, weil der Benutzer es manuell macht (aber auf ziemlich einfache Weise). Natürlich funktioniert es in allen Browsern.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>

Die Anzahl der in diesem Dialogfeld angezeigten Zeichen ist jedoch begrenzt, und daher gibt es eine Begrenzung der zu kopierenden Datenmenge.

– Denilson Sá Maia

4. September 2011 um 2:32 Uhr
Clever, aber dies unterstützt nur eine einzelne Zeile.

– Aram Kocharyan

23. Oktober 2011 um 8:56 Uhr
Es ist trivial, die „Eingabeaufforderung“-Funktion in ein benutzerdefiniertes Modal zu ändern, der Kern des Tricks besteht darin, ein bearbeitbares Inhaltsfeld zu verwenden und den Text vorab auszuwählen, und dass die Browser-Benutzeroberfläche nicht beschädigt wird, indem der Benutzer erzwingt, dies zu tun Aktion selbst. A++

– Jon z

17. Januar 2012 um 18:57 Uhr
Wenn Ihr Text mehr als 2000 Zeichen umfasst, wird er abgeschnitten, aber für kleinere Textbeispiele funktioniert es hervorragend

– RasTheDestroyer

4. September 2013 um 18:51 Uhr
@RasTheDestroyer – Das Abschneiden bei 2k Zeichen scheint ein Chrome-Problem zu sein, aber es ist trotzdem gut zu wissen

– Markus Papst

18. September 2013 um 23:19 Uhr

Nette Antwort: Cross-Browser-Unterstützung, Fehlerbehandlung + Bereinigung. Ab der heutigen neuen Unterstützung für queryCommandSupported ist das Kopieren in die Zwischenablage jetzt in Javascript möglich und dies sollte die akzeptierte Antwort sein, anstatt der umständlichen ‘window.prompt(“In die Zwischenablage kopieren: Strg+C, Eingabe”, Text)’ Problemumgehung. window.clipboardData wird in IE9 unterstützt, also sollten Sie IE9 in die Browser-Unterstützungsliste aufnehmen, und ich denke, vielleicht auch IE8 und frühere, müssen dies jedoch überprüfen.

– Benutzer627283

1. Dezember 2015 um 17:38 Uhr
@SantiagoCorredoira: Im Jahr 2016 verdient dies die akzeptierte Antwort. Bitte denken Sie daran, die BGT (großes grünes Häkchen) neu zuzuweisen.

– Lawrence Dol

22. April 2016 um 1:25 Uhr
@Noitidart Ich habe es getestet und es funktioniert perfekt für Firefox 54, Chrome 60 und den Edge-Browser, selbst wenn der Fokus nicht im HTML-Dokument liegt, ist der Fehler, den Sie haben, wahrscheinlich spezifisch für Version FF 55

– Tosin John

12. August 2017 um 1:01 Uhr
@Noitidart Es funktioniert hier immer noch perfekt, die Konzentration auf Entwicklungstools hat es nicht aufgehalten. Und übrigens, was wird ein normaler Web-App-Benutzer mit Entwicklertools machen?

– Tosin John

12. August 2017 um 16:48 Uhr
Benutzer der jQuery-BenutzeroberflächeHinweis: Beachten Sie, dass bei dieser Methode Probleme auftreten, wenn Sie versuchen, diese Funktion in einem modalen Dialogfeld zu verwenden. Ich vermute, es liegt daran, dass das Modal der jQuery-Benutzeroberfläche den Dokumentfokus verwaltet/manipuliert. Wenn es zu Ihrem Anwendungsfall passt, besteht eine Problemumgehung darin, zuerst den modalen Dialog zu schließen und dann den Text zu kopieren. Oder verwenden Sie einfach ein nicht-modales Dialogfeld. Ich vermute, dass Sie diese Funktion möglicherweise auch so ändern können, dass sie den Textbereich zum Modal statt zum Körper hinzufügt.

– Rinogo

31. Dezember 2018 um 20:30 Uhr

Nikksan

Hier ist meine Meinung dazu…

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

@korayem: Beachten Sie, dass HTML verwendet wird input Feld respektiert keine Zeilenumbrüche \n und wird jeden Text in eine einzelne Zeile glätten.

Wie von @nikksan in den Kommentaren erwähnt, using textarea wird das Problem wie folgt beheben:

function copy(text) {
    var input = document.createElement('textarea');
    input.innerHTML = text;
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
}

@sof-03 benutze textarea statt input und add \r\n für einen Zeilenumbruch

– Niksan

22. Mai 2018 um 11:18 Uhr
Funktioniert nicht in Microsoft Edge 42.17134.1.0 unter Win10x64

– Honsa Stunna

30. Mai 2018 um 14:26 Uhr
Ich habe deine Antwort kopiert. Es funktioniert in Chrom und das ist alles, was ich brauche.

– Benutzer875234

15. November 2018 um 14:51 Uhr
Dies ist die einfachste Lösung, die mit Firefox v68.0.2 (64-Bit) funktioniert.

– Arja

24. August 2019 um 5:37 Uhr
Aus irgendeinem Grund funktionierte mein übliches “verstecktes Eingabe- oder Textfeld erstellen, dann auswählen und ausführen” nicht, und dies war bei weitem die beste hier aufgeführte Lösung, obwohl andere umfassend sind und wie vollständige Wikipedia-Seiten funktionieren, funktionierte diese gut für mich also +1

– Justin

31. Januar 2021 um 22:20 Uhr

Deponie-Baby

Das Lesen und Ändern der Zwischenablage von einer Webseite wirft Sicherheits- und Datenschutzbedenken auf. Im Internet Explorer ist dies jedoch möglich. ich habe das gefunden Beispielschnipsel:

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />

@sof-03 benutze textarea statt input und add \r\n für einen Zeilenumbruch

– Niksan

22. Mai 2018 um 11:18 Uhr
Funktioniert nicht in Microsoft Edge 42.17134.1.0 unter Win10x64

– Honsa Stunna

30. Mai 2018 um 14:26 Uhr
Ich habe deine Antwort kopiert. Es funktioniert in Chrom und das ist alles, was ich brauche.

– Benutzer875234

15. November 2018 um 14:51 Uhr
Dies ist die einfachste Lösung, die mit Firefox v68.0.2 (64-Bit) funktioniert.

– Arja

24. August 2019 um 5:37 Uhr
Aus irgendeinem Grund funktionierte mein übliches “verstecktes Eingabe- oder Textfeld erstellen, dann auswählen und ausführen” nicht, und dies war bei weitem die beste hier aufgeführte Lösung, obwohl andere umfassend sind und wie vollständige Wikipedia-Seiten funktionieren, funktionierte diese gut für mich also +1

– Justin

31. Januar 2021 um 22:20 Uhr

Peter Mortensen

Wenn Sie eine wirklich einfache Lösung wollen (die Integration dauert weniger als 5 Minuten) und von Anfang an gut aussieht, dann Clippy ist eine schöne Alternative zu einigen der komplexeren Lösungen.

Es wurde von einem Mitbegründer von GitHub geschrieben. Beispiel-Flash-Einbettungscode unten:

<object
    classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
    width="110"
    height="14"
    id="clippy">

    <param name="movie" value="/flash/clippy.swf"/>
    <param name="allowScriptAccess" value="always"/>
    <param name="quality" value="high"/>
    <param name="scale" value="noscale"/>
    <param NAME="FlashVars" value="text=#{text}"/>
    <param name="bgcolor" value="#{bgcolor}"/>
    <embed
        src="/flash/clippy.swf"
        width="110"
        height="14"
        name="clippy"
        quality="high"
        allowScriptAccess="always"
        type="application/x-shockwave-flash"
        pluginspage="http://www.macromedia.com/go/getflashplayer"
        FlashVars="text=#{text}"
        bgcolor="#{bgcolor}"/>
</object>

Denken Sie daran, zu ersetzen #{text} mit dem Text, den Sie kopieren müssen, und #{bgcolor} mit einer Farbe.

Überprüfen Sie für alle Interessierten, ob Clippy auf GitHub verwendet wird, wenn Sie die URL für das Repo kopieren.

– Radek

23. Mai 2011 um 11:19 Uhr

9859100cookie-checkWie kopiere ich in JavaScript in die Zwischenablage?

#Javascript #Kopieren Einfügen #Zwischenablage