JavaScript: Text in Textarea markieren und in die Zwischenablage kopieren

Ich stolpere auf der Suche nach Lösungen für meine Kundenwebseiten immer mal auf Codeschnipsel, die allgemein sehr praktisch sind. Damit ich mir diese auch merken kann, erhalten sie einfach einen Beitrag in meinem Blog.

Inhalt von Formular-Feldern per Button in Zwischenablage kopieren

Im aktuellen Fall hat die besagte Webseite ein Formular mit einem Textbereich, welches aus einem TEXTAREA-Code besteht. In diesem Textfeld stehen viele Zeilen Daten, die der Besucher markieren und dann selbst in die Zwischenablage kopieren muss. Um diesen Schritt zu erleichtern, wollte ich einen Button einbauen, der in einem Rutsch alles im Textfeld markiert und es dann direkt in die Zwischenablage kopiert.

Javascript Codeschnipsel

Gelöst wird das Ganze über ein Javascript, welches die Funktion des Buttons übernimmt. Dafür verwendet man den Befehl select(), um den Text in dem Textarea-Element zu markieren und dann execCommand(‘copy’, um den Text zu kopieren. Das Ganze funktioniert in neueren Browsern recht gut.

Hat man die jQuery-Bibliothek schon in Verwendung, kann man diesen Code nutzen:

$("button").click(function(){
    $("textarea").select();
    document.execCommand('copy');
});

Hat man kein jQuery auf der Webseite laufen, kann man diesen Code hier verwenden:

document.querySelector("button").onclick = function(){
  document.querySelector("textarea").select();
  document.execCommand('copy');
};

Den HTML-Code für den Button und das Formularfeld muss man dann so gestalten:

<button>Auswählen und kopieren</button>
<br/>
<textarea></textarea>

Ich hoffe, das klappt bei euch genauso gut, wie bei mir. Bei alten Browsern kann es unter Umständen zu Problemen kommen, aber ich denke, die meisten haben aktuelle Versionen am Start. Wenn ihr noch praktische Codeschnipsel habt, lasst es mich gerne wissen. Ich bin immer froh über neue, hilfreiche Codesnippets für HTML, JavaScript oder PHP.

Jens Kleinholz( Gründer & Sir Apfelot )

Seit 2012 betreibe ich meinen Blog als Sir Apfelot und helfe meinen Lesern bei technischen Problemen. In meiner Freizeit flitze ich auf elektrischen Einrädern, fotografiere mit meinem iPhone, klettere in den hessischen Bergen oder wandere mit meiner Familie. Meine Artikel behandeln Apple-Produkte, Drohnen-News und Lösungen für aktuelle Bugs.