Javascript

String in die Zwischenablage kopieren mit Javascript (ohne Bibliotheken)

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.

 

Posted by Uli Köhler in Javascript