Wie kann ich in JavaScript in die Zwischenablage kopieren?

Question

Wie kopiere ich am besten Text in die Zwischenablage (Multibrowser)?

Ich habe es 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);
    }
}

Im Internet Explorer kommt es jedoch zu einem Syntaxfehler. In Firefox heißt es unsafeWindow ist nicht definiert .

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

Answer 1

Übersicht

Es gibt drei primäre Browser-APIs für das Kopieren in die Zwischenablage:

1. Asynchrone Zwischenablage-API [navigator.clipboard.writeText]

   • Textorientierter Teil verfügbar in Chrome 66 (März 2018)
   • Der Zugriff erfolgt asynchron und verwendet JavaScript-Versprechen kann so geschrieben werden, dass Sicherheitsabfragen (falls angezeigt) das JavaScript auf der Seite nicht unterbrechen.
   • Text kann direkt aus einer Variablen in die Zwischenablage kopiert werden.
   • Wird nur auf Seiten unterstützt, die über HTTPS bereitgestellt werden.
   • In Chrome 66 können inaktive Tabs ohne eine Berechtigungsabfrage in die Zwischenablage schreiben.

2. document.execCommand('copy') ( _Abgelehnt_ )

   • Die meisten Browser unterstützen dies seit ca. April 2015 (siehe Browser-Support unten).
   • Der Zugriff erfolgt synchron, d. h. JavaScript wird auf der Seite angehalten, bis die Seite vollständig ist, einschließlich der Anzeige und der Interaktion des Benutzers mit etwaigen Sicherheitsabfragen.
   • Der Text wird aus dem DOM gelesen und in der Zwischenablage abgelegt.
   • Bei den Tests im April 2015 wurde nur beim Internet Explorer festgestellt, dass beim Schreiben in die Zwischenablage Berechtigungsaufforderungen angezeigt wurden.

3. Überschreiben des Kopierereignisses

   • Siehe Dokumentation der Zwischenablage-API auf Überschreiben des Kopierereignisses .
   • Ermöglicht es Ihnen, den Inhalt der Zwischenablage bei jedem Kopiervorgang zu ändern und kann auch andere Datenformate als reinen Text enthalten.
   • Wird hier nicht behandelt, da es keine direkte Antwort auf die Frage gibt.

Allgemeine Entwicklungshinweise

Erwarten Sie nicht, dass Befehle für die Zwischenablage funktionieren, während Sie Code in der Konsole testen. Im Allgemeinen muss die Seite aktiv sein (Async Clipboard API) oder erfordert eine Benutzerinteraktion (z. B. einen Benutzerklick), damit sie funktioniert ( document.execCommand('copy') ), um auf die Zwischenablage zuzugreifen, siehe unten für weitere Informationen.

WICHTIG (notiert hier 2020/02/20)

Beachten Sie, dass seit der Erstellung dieses Beitrags Ablehnung von Berechtigungen in herkunftsübergreifenden IFRAMEs und andere IFRAME "Sandboxing" verhindert, dass die eingebetteten Demos "Run code snippet"-Buttons und "codepen.io example" in einigen Browsern (einschließlich Chrome und Microsoft Edge) funktionieren.

Um zu entwickeln, erstellen Sie Ihre eigene Webseite und stellen Sie diese Seite über eine HTTPS-Verbindung bereit, um sie zu testen und zu entwickeln.

Hier ist eine Test-/Demoseite, die zeigt, dass der Code funktioniert: https://deanmarktaylor.github.io/clipboard-test/

Async + Fallback

Aufgrund des Grades der Browserunterstützung für die neue Async-Zwischenablage-API werden Sie wahrscheinlich auf die document.execCommand('copy') Methode, um eine gute Browserabdeckung zu erhalten.

Hier ein einfaches Beispiel (funktioniert möglicherweise nicht in dieser Website eingebettet, lesen Sie den "wichtigen" Hinweis oben):

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;

  // Avoid scrolling to bottom
  textArea.style.top = "0";
  textArea.style.left = "0";
  textArea.style.position = "fixed";

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});

copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

(codepen.io-Beispiel funktioniert möglicherweise nicht, siehe "wichtiger" Hinweis oben) Beachten Sie, dass dieses Snippet in der eingebetteten Vorschau von Stack Overflow nicht gut funktioniert. Sie können es hier versuchen: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011

Asynchrone Zwischenablage-API

• MDN-Referenz
• Beitrag zur Ankündigung von Chrome 66 (März 2018)
• Referenz Asynchrone Zwischenablage-API Dokumentationsentwurf

Beachten Sie, dass es in Chrome 66 die Möglichkeit gibt, über die Berechtigungs-API eine "Berechtigung anzufordern" und den Zugriff auf die Zwischenablage zu testen.

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand('copy')

Der Rest dieses Beitrags befasst sich mit den Nuancen und Details der document.execCommand('copy') API.

Browser-Unterstützung

Das JavaScript document.execCommand('copy') Unterstützung ist gewachsen, siehe die Links unten für Browser-Updates: ( _Abgelehnt_ )

• Internet Explorer 10+ (obwohl dieses Dokument zeigt an, dass Internet Explorer 5.5+ eine gewisse Unterstützung bot).
• Google Chrome 43+ (~April 2015)
• Mozilla Firefox 41+ (Auslieferung ~September 2015)
• Opera 29+ (basierend auf Chromium 42, ~April 2015)

Einfaches Beispiel

(funktioniert möglicherweise nicht auf dieser Website, siehe "wichtiger" Hinweis oben)

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});

<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

Komplexes Beispiel: Kopieren in die Zwischenablage ohne Anzeige der Eingabe

Das obige einfache Beispiel funktioniert gut, wenn es eine textarea o input Element auf dem Bildschirm sichtbar.

In einigen Fällen möchten Sie vielleicht Text in die Zwischenablage kopieren, ohne eine input / textarea Element. Dies ist ein Beispiel für eine Möglichkeit, dies zu umgehen (im Grunde ein Element einfügen, in die Zwischenablage kopieren, Element entfernen):

Getestet mit Google Chrome 44, Firefox 42.0a1 und Internet Explorer 11.0.8600.17814.

(funktioniert möglicherweise nicht in dieser Website eingebettet, lesen Sie den "wichtigen" Hinweis oben)

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if the element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a
  // flash, so some of these are just precautions. However in
  // Internet Explorer the element is visible whilst the popup
  // box asking the user for permission for the web page to
  // copy to the clipboard.
  //

  // Place in the top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of the white box if rendered for any reason.
  textArea.style.background = 'transparent';

  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});

copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:

  </textarea>
</div>

Zusätzliche Hinweise

Funktioniert nur, wenn der Benutzer eine Aktion ausführt

Alle document.execCommand('copy') Aufrufe müssen als direkte Folge einer Benutzeraktion erfolgen, z. B. durch einen Click-Event-Handler. Dies ist eine Maßnahme, um zu verhindern, dass die Zwischenablage des Benutzers manipuliert wird, wenn dieser es nicht erwartet.

Siehe die Google Developers Beitrag hier für weitere Informationen.

Zwischenablage-API

Der vollständige Entwurf der Clipboard-API-Spezifikation kann hier eingesehen werden: https://w3c.github.io/clipboard-apis/

Wird sie unterstützt?

• document.queryCommandSupported('copy') sollte zurückkehren true wenn der Befehl "vom Browser unterstützt wird".
• et document.queryCommandEnabled('copy') return true wenn die document.execCommand('copy') wird erfolgreich sein, wenn sie jetzt aufgerufen wird. Überprüfung, ob der Befehl von einem vom Benutzer initiierten Thread aufgerufen wurde und andere Anforderungen erfüllt sind.

Als Beispiel für Browser-Kompatibilitätsprobleme lieferte Google Chrome von ~April bis ~Oktober 2015 nur true von document.queryCommandSupported('copy') wenn der Befehl von einem vom Benutzer initiierten Thread aufgerufen wurde.

Einzelheiten zur Kompatibilität siehe unten.

Browser-Kompatibilität Detail

Während ein einfacher Aufruf von document.execCommand('copy') eingewickelt in ein try / catch Block als Ergebnis eines Benutzers aufgerufen wird, klicken Sie auf die meisten Kompatibilität verwenden Sie die folgenden hat einige Vorbehalte:

Jeder Aufruf von document.execCommand , document.queryCommandSupported o document.queryCommandEnabled sollte in eine Hülle aus try / catch Block.

Verschiedene Browser-Implementierungen und Browser-Versionen lösen unterschiedliche Arten von Ausnahmen aus, wenn sie aufgerufen werden, anstatt dass sie false .

Die verschiedenen Browser-Implementierungen sind noch im Fluss und die Zwischenablage-API ist noch im Entwurfsstadium, denken Sie also daran, Ihre Tests durchzuführen.

Answer 2

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

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

Dem Benutzer wird das Eingabeaufforderungsfeld angezeigt, in dem der zu kopierende Text bereits ausgewählt ist. Jetzt genügt es, die Taste Ctrl + C y Enter (um die Box zu schließen) - und voila!

Der Kopiervorgang aus der Zwischenablage lautet nun sicher weil der Benutzer es manuell (aber auf ziemlich einfache Weise) macht. 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>

Answer 3

Der folgende Ansatz funktioniert in Chrome, Firefox, Internet Explorer und Edge sowie in neueren Versionen von Safari (die Kopierunterstützung wurde in Version 10, die im Oktober 2016 veröffentlicht wurde, hinzugefügt).

• Erstellen Sie einen Textbereich und legen Sie den Inhalt auf den Text fest, den Sie in die Zwischenablage kopieren möchten.
• Fügen Sie die Textarea an das DOM an.
• Markieren Sie den Text in der Textarea.
• document.execCommand("copy") aufrufen
• Entfernen Sie die Textarea aus dem Dom.

Hinweis: Sie werden die Textarea nicht sehen, da sie innerhalb desselben synchronen Aufrufs von Javascript-Code hinzugefügt und entfernt wird.

Es gibt einige Dinge, auf die Sie achten sollten, wenn Sie dies selbst umsetzen wollen:

• Aus Sicherheitsgründen kann dies nur von einem Event-Handler wie z.B. Klick aufgerufen werden (genau wie beim Öffnen von Windows).
• Der Internet Explorer zeigt beim ersten Aktualisieren der Zwischenablage ein Dialogfeld mit einer Berechtigung an.
• Internet Explorer und Edge führen einen Bildlauf durch, wenn der Textbereich fokussiert ist.
• execCommand() kann in einigen Fällen einen Fehler verursachen.
• Zeilenumbrüche und Tabulatoren können verschluckt werden, es sei denn, Sie verwenden eine Textarea. (Die meisten Artikel scheinen die Verwendung eines div zu empfehlen)
• Der Textbereich ist sichtbar, während der Internet Explorer-Dialog angezeigt wird. Sie müssen ihn entweder ausblenden oder die Internet Explorer-spezifische clipboardData-API verwenden.
• Im Internet Explorer können Systemadministratoren die Zwischenablage-API deaktivieren.

Die unten stehende Funktion sollte alle folgenden Probleme so sauber wie möglich lösen. Bitte hinterlassen Sie einen Kommentar, wenn Sie Probleme finden oder Vorschläge zur Verbesserung haben.

// Copies a string to the clipboard. Must be called from within an
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+,
// Firefox 42+, Safari 10+, Edge and Internet Explorer 10+.
// Internet Explorer: The clipboard feature may be disabled by
// an administrator. By default a prompt is shown the first
// time the clipboard is used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible.
        return window.clipboardData.setData("Text", text);

    }
    else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in Microsoft Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        }
        catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return prompt("Copy to clipboard: Ctrl+C, Enter", text);
        }
        finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/

Answer 4

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 die Verwendung von html input Das Feld beachtet keine Zeilenumbrüche \n und reduziert jeden Text auf eine einzige Zeile.

Wie von @nikksan in den Kommentaren erwähnt, ist die Verwendung von textarea wird das Problem wie folgt behoben:

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

Answer 5

Das Lesen und Ändern der Zwischenablage einer Webseite wirft Sicherheits- und Datenschutzbedenken auf. Im Internet Explorer ist dies jedoch möglich. Ich habe Folgendes 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" />