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.
✂️ | ? | 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>
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?
Ich nutze ihn genau so, wie hier beschrieben zum Beispiel hier im Blog bei den Herz Emojies. Kannst dir gern nochmal dort den Quellcode zu anschauen. Ggf. die Webdeveloper-Console bei dir öffnen und schauen, ob es Fehlermeldungen gibt.
Hallo, das Beispiel und der Code geht nicht.
Dann mal in der Webdeveloperconsole schauen, was das Problem ist. JQuery vielleicht …
funktioniert bei mir auch nicht
Ist bei mir hier auf der Seite genauso umgesetzt, wie im Artikel beschrieben. Gibt es irgendwelche Fehlermeldungen auf der Entwicklerkonsole im Browser bei dir?
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