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 )

Jens betreibt das Blog seit 2012. Er tritt für seine Leser als Sir Apfelot auf und hilft ihnen bei Problemen technischer Natur. Er fährt in seiner Freizeit elektrische Einräder, fotografiert (natürlich am liebsten mit dem iPhone), klettert in den hessischen Bergen rum oder wandert mit der Familie. Seine Artikel beschäftigen sich mit Apple Produkten, Neuigkeiten aus der Welt der Drohnen oder mit Lösungen für aktuelle Bugs.