Text in die Zwischenablage kopieren

Wann immer man inhalte aus HTML Seiten und HTML Formularen in die Zwischenablage kopieren möchte, wird hier eine Lösung finden. Es gibt auch Lösungen die AdobeFlash nutzen, aber Flash gilt als unsicher und wird nicht mehr so häufig installiert, wie vor einigen Jahren.

Funktionsweise

Es wird ein dynamisch ein neues Feld vom Typ TEXTAREA erzeugt und ausserhalb des sichtbaren Bereicht in die aktuelle Seite eingebunden. Danach wird der Gewünschte Text in dieses Formular hineinkopiert und der Hinhalt mit document.execCommand('copy'); in die Zwischenablage kopiert.
Da diese TEXTAREA nun nicht mehr benötigt wird, wird das element wieder entfernt.

Quelle: https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f

<script  type="application/javascript">
const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};
</script>

Beispielaufruf:

<button onclick="copyToClipboard(document.getElementById('quellcode2copy').value)">Copy</button><input id="quellcode2copy" value="Hallo Welt" />

Copy

Nachfolge API verfügbar

Die hier verwendete Methode document.execCommand('copy') ist mittlerweile als deprecated markiert. Das heisst die Unterstüzung in den Browsern kann mittelfristig entfallen. Bitte daher auf die Clipboard_API migrieren. Damit einher geht die Bedingung, dass die dazugehörige Webseite mit HTTPS verschlüsselt sein muss.

Siehe https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API