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.