Beitrag wurde zuletzt am aktualisiert

Text per Button-Klick in die Zwischenablage kopieren

Copy Emoji to Clipboard

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:

Uncaught TypeError: $ is not a function

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.

✂️ 📋 Copy & Paste

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>


2 Kommentare zu "Text per Button-Klick in die Zwischenablage kopieren"

  1. Hey, wollte gerne so eine Funktion auf meiner Webseite einbauen. Aber leider funktioniert der Code nicht. Es wird nichts kopiert, wenn man auf die einzelnen Buttons klickt. Hast du vielleicht eine Idee was vielleicht noch fehlerhaft am Code ist?

Hinterlasse einen Kommentar

E-Mail Adresse wird nicht veröffentlicht.