Uli Köhler

Um in Javascript einen String in die Zwischenablage zu kopieren ohne eine externe Bibliothek wie clipboard.js zu verwenden, verwende diese Funktion:

function copyStringToClipboard (str) {
   // Temporäres Element erzeugen
   var el = document.createElement('textarea');
   // Den zu kopierenden String dem Element zuweisen
   el.value = str;
   // Element nicht editierbar setzen und aus dem Fenster schieben
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   // Text innerhalb des Elements auswählen
   el.select();
   // Ausgewählten Text in die Zwischenablage kopieren
   document.execCommand('copy');
   // Temporäres Element löschen
   document.body.removeChild(el);
}

Warnung: Sollte der Benutzer beim Aufruf der Funktion Text auf der Seite ausgewählt haben, wird diese Auswahl gelöscht. Dieser Hackernoon-Artikel stellt hierfür eine Lösung vor (englisch), wir konzentrieren uns hier jedoch auf die einfachstmögliche Lösung.

Du kannst die Funktion zum Beispiel so benutzen:

copyStringToClipboard("abc123");

Browser-Kompatibilität

Unsere Lösung benutzt nur Standard-Javascript (ES6 ist nicht notwendig), das DOM-API (das bereits mehrere Jahrzehnte alt ist) und document.exec('copy'); , welches laut dem Mozilla Developer’s network kompatibel mit allen großen Browsern, einschließlich Internet Explorer ab IE9, ist.

Wie funktioniert das genau?

Wir erzeugen eine neue, temporäre <textarea> und setzen deren Wert auf den zu kopierenden String (zum Beispiel "abc123" in unserem o.g. Beispiel).

Um den Nutzer und insbesondere Screenreader nicht zu verwirren, setzen wir die <textarea> auf readonly (d.h. nicht editierbar) und schieben sie -9999px nach links aus dem Viewport hinaus. In allen praktischen Szenarien liegt die <textarea> dann weit außerhalb des sichtbaren Bildschirms.

Erst nachdem wir die <textarea> aus dem sichtbaren Viewport herausgeschoben haben, fügen wir sie zum DOM hinzu, sodass sie nichteinmal für den Bruchteil einer Sekunde angezeigt werden könnte.

Nun können wir den Text innerhalb der <textarea> mit el.select() auswählen und dann mit document.execCommand('copy'); in die systemweite Zwischenablage kopieren.

Schlussendlich können wir die <textarea> wieder aus dem DOM entfernen.

Danke an  Angelos Charalis auf Hackernoon für die Idee, die Textarea aus dem Viewport zu verschieben.