Strings in die Zwischenablage kopieren mit reinem Javascript

Um einen String in die System-Zwischenablage im Browser zu kopieren, ohne eine Abhängigkeit wie clipboard.js zu verwenden, nutze diese Funktion:

function copyStringToClipboard (str) {
   // Neues Element erstellen
   var el = document.createElement('textarea');
   // Wert setzen (zu kopierender String)
   el.value = str;
   // Nicht-editierbar setzen, um Fokus zu vermeiden und aus dem Sichtbereich verschieben
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // Text im Element auswählen
   el.select();
   // Text in die Zwischenablage kopieren
   document.execCommand('copy');
   // Temporäres Element entfernen
   document.body.removeChild(el);
}

Hinweis: Wenn der Benutzer etwas ausgewählt hat, wenn du die Funktion ausführst, wird diese Auswahl gelöscht. Wenn du die Auswahl erhalten musst, siehe diesen Hackernoon-Artikel für eine ausführlichere Lösung.

Du kannst es so verwenden:

// Verwendungsbeispiel:
copyStringToClipboard("abc123");

Browser-Kompatibilität

Diese Lösung verwendet nur grundlegendes Javascript (keine ES6-Features erforderlich), die DOM-API, die seit Jahrzehnten existiert, und document.exec('copy');, was laut dem Mozilla Developer’s network mit allen großen Browsern kompatibel ist, einschließlich Internet Explorer ab IE9.

Funktionsweise

Wir erstellen ein neues <textarea>-Element, dessen Wert wir auf den zu kopierenden String setzen (z.B. "abc123" in unserem Verwendungsbeispiel oben).

Um den Benutzer und, wichtiger, Screenreader nicht zu verwirren, setzen wir es auf readonly und verschieben es -9999px nach links, was für alle praktischen Zwecke garantiert außerhalb des Viewports liegt.

Erst nach dem Verschieben des Elements außerhalb des Viewports fügen wir es zum DOM hinzu, damit es nicht einmal für den Bruchteil einer Sekunde angezeigt wird.

Nun können wir den Text im Element mit el.select() auswählen und mit document.execCommand('copy'); in die Zwischenablage kopieren.

Schließlich entfernen wir das Element aus dem DOM.

Credits an Angelos Charalis auf Hackernoon für die ursprüngliche Idee, das Element außerhalb des Viewports zu verschieben.