Text per Button-Klick in die Zwischenablage kopieren

Für meinen Artikel über die Verwendung von Emojis in Youtube-Kommentaren wollte ich es Besuchern auf einem einfachen ermöglichen, die Emoticon zu kopieren.

Dazu fand ich an verschiedenen Stellen im Netz eine auf jQuery-basierende JavaScript-Funktion. Unter anderem ein schönes Beispiel auf Codepen.io unter dem Titel How to copy a TEXT to Clipboard on a Button-Click.

Die JS-Funktion und den Button konnte ich schnell hier im Blog einfügen, nur funktionieren wollte das Ganze leider nicht sofort. Nach einigen Fehlschlägen und dem Auftauchen der Fehlermeldung:

in der Webdeveloper Console, fand ich den entscheidenden Tipp bei Stackoverflow.com.

<script>
  var $ = jQuery;
  function copyToClipboard(element) {
    var $temp = $("<input />");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}
</script>

Die Zeile var $ = jQuery; vor dem Funktionsaufruf machte den kleinen aber entscheidenden Unterschied aus.

Damit war es kein Hexenwerk mehr, unterschiedliche Emojis oder anderen beliebigen Text zum Kopieren per Button bereit zu stellen.

Den JavaScript-Code einfach direkt mit in den Beitrag kopiert und die zu kopierenden Emojis so wie hier im Text-Modus im Classic-Editor eingefügt. Schon können die Besucher sich auf einfachsten Weg die Smileys in der Zwischenablage ablegen und auf anderen Seiten einfügen.

Der HTML-Quellcode hierfür:

<b id="p1">✂️</b>
<button onclick="copyToClipboard('#p1')"><i class="fa fa-copy"></i></button>
<b id="p2">?</b>
<button onclick="copyToClipboard('#p2')"><i class="fa fa-copy"></i></button>
<b id="p3">Copy & Paste</b>
<button onclick="copyToClipboard('#p3')"><i class="fa fa-copy"></i></button>