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>

7 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?

  2. Hallo, das Beispiel und der Code geht nicht.

  3. funktioniert bei mir auch nicht

  4. Dankeschön für das einfache Beispiel :-)

    Bei mir funktioniert es :-)

    Ich habe den Code aus der Beispielseite verwendet und bei mir angepasst.

    Wenigstens ist der Code nicht überladen so wie es bei manch anderen Beispielen der Fall ist.

    Den kosmetischen Teil kann man immer noch basteln…

    Eine kleine Bestätigung des Kopierens wäre noch toll, da ich leider kein Guru in Sachen JS bin ;-) aber wenn keine richtige Überprüfung stattfindet, ob der Inhalt wirklich in der Zwischenablage sich befindet, sollte dies zum Beispiel auch mit CSS umgesetzt werden können, da diese ‚Alert‘-Fenster doch dann nerven :D

    Vielleicht ließe sich eine document.write() oder so, bauen :D

Hinterlasse einen Kommentar

E-Mail Adresse wird nicht veröffentlicht.