JavaScript: Text in Textarea markieren und in die Zwischenablage kopieren

JavaScript Codeschnipsel

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.

Kleine Codeschnipsel helfen immer wieder dabei, Webseiten um hilfreiche Funktionen zu erweitern (Foto: Joan Gamell/Unsplash).

Kleine Codeschnipsel helfen immer wieder dabei, Webseiten um hilfreiche Funktionen zu erweitern (Foto: Joan Gamell/Unsplash).

Sir Apfelot auf SteadyHQ unterstützen

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.


Hat dir der Artikel gefallen und helfen dir die Anleitungen im Blog? Dann würde ich mich freuen, wenn du das Blog über eine Steady-Mitgliedschaft oder bei Patreon unterstützen würdest.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.