Javascript: Copy to clipboard

Kopiere Text per javascript in die Zwischenablage (copy to clipboard)

Für diese Funktion gibt es bereits unzählige Anleitungen, wie z.B. bei w3schools.com: Copy Text to clipboard

Wir brauchen ein Eingabefeld und einen copy button:

<input type="text" value="Your Name here" id="name">
<button onclick="cp2cb()">Namen kopieren</button>

Das eigentliche Javascript:

<script type="text/javascript">
function cp2cb() {
 var myText = document.getElementById("name");
 myText.select();
 document.execCommand("copy");
 alert("Text kopiert: " + myText.value);
}
</script>

Nach dem anklicken von „Namen kopieren“ wir der Text in die Zwischenablage kopiert und ein Hinweis ausgegeben. (Alertbox)

Soweit so gut.

Soll das inputfeld aber nicht angezeigt werden gibt es verschiedene Ansätze.

<input type="hidden" value="Your Name here" id="name">

Das Input Feld wird nicht angezeigt, kann aber auch vom script NICHT kopiert werden.

Bleibt der Weg über css

im Abschnitt css

<style>

#name {
position: absolute;
left: -2000px;
top: -2000px;
}
</style>

Das Feld wird jetzt nicht angezeigt, kann aber vom script ausgelesen werden.

Evtl müssen die Werte im css angepasst werden.