Wie du einen Kopier-Button erstellst

Wie du mit HTML einen Button erstellst, der einen Text in die Zwischenablage kopiert

Möchtest du, dass deine User z.B. Inhalte oder einen Link von deiner Seite in die Zwischenablage kopieren, damit sie diesen Inhalt oder den Link bequem teilen oder weiterverarbeiten können ? Klar, könnten die User den Text markieren und dann kopieren. Was mit Computer und Maus noch machbar scheint, wird spätestens auf dem Smartphone zu einer echten Herausforderung. Viel einfacher und userfreundlicher wäre es doch, einen Button „kopieren“ bereitzustellen, der den Inhalt bequem per Klick in die Zwischenablage kopiert.

Im folgenden möchte ich dir zeigen, wie du einen solchen „Kopier-Button“ mittels HTML und ein bisschen Javascript einfach realisieren kannst.

Der HTML-Code

Um den Text in die Zwischenablage kopieren zu können, benötigst du zunächst zwei HTML-Elemente

1.) den zu kopierenden Text – in unserem Beispiel ein Textfeld mit Text

2.) den Button – der dafür sorgt, das der Text kopiert wird

<!-- Textfeld mit Inhalt -->
<input type="text" value="Lorem Ipsum" id="myText">

<!-- Button zum Kopieren -->
<button onclick="CopyFunction()">In Zwischenablage kopieren</button>

Der Text muss allerdings nicht in einem Textfeld stehen, sondern kann in einem beliebigen HTML-Element eingebettet sein.

Der JavaScript-Code

Nachdem alle HTML Elemente erstellt wurden, benötigen wir noch die Funktion, welche den Text in die Zwischenablage kopiert. Hierzu muss folgender JavaScript-Code in den HTML-Code deiner Seite eingebunden werden. Es empfiehlt sich den JavaScript, unten im Footer Bereich einzubinden.

<script>
function CopyFunction() {
/* Textfeld Get the text field */
var copyText = document.getElementById("myText");

/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* Für Mobile Devices */

/* Kopiere den Text us dem Textfeld */
document.execCommand("copy");

/* Hinweis, wenn Text kopiert wurde */
alert("In Zwischenablage kopiert");
}

</script>

Statt den Code direkt so in die HTML-Seite zu kopieren, kannst du auch den Code (ohne <script>-Tag) in eine .js-Datei kopieren und diese Datei einbinden.

Beispiel

So würde das Ergebnis nun in der Praxis aussehen.

In Zwischenablage kopieren

Fazit

Ein Kopier-Button auf der eigenen Homepage, der bestimmte Inhalte bequem in die Zwischenablage kopiert ist userfreundlich und gleichzeitig schnell zu realisieren.