Copy data attribute to clipboard on click with purejs

Question

I have list of images. I want to copy data attribute on click to clipboard. What I have now is alert data-attribute. I tried copy command but it didn't work (don't copy anything). Please, can anyone help me with that?

var emojiImages = document.getElementsByClassName('emoji-image');

for(var i=0; i< emojiImages.length; i++){
    emojiImages[i].onclick = function(){ 
        var a = this.getAttribute('data-emoji');      
        alert(a);
    }
}

<ul style="display: block; column-count: 8;"><li>:first:<img class="emoji-image" src="https://www.gravatar.com/avatar/086495a58faa8219a2640ad87325a12d?s=48&d=identicon&r=PG&f=1" width="36" height="36" data-emoji=":first:"></li><li>:second:<img class="emoji-image" src="https://www.gravatar.com/avatar/086495a58faa8219a2640ad87325a12d?s=48&d=identicon&r=PG&f=1" width="36" height="36" data-emoji=":second:"></li></ul>

Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Bert H, Feb 22 '19 at 13:37

Basel Issmail · Accepted Answer · 2018-03-07T10:34:05.953

The Idea that copy command works great if there is a textarea or input element visible on screen.
so create one put text in it, copy textarea content, then remove it.

var emojiImages = document.getElementsByClassName('emoji-image');

for(var i=0; i< emojiImages.length; i++){
    emojiImages[i].onclick = function(){ 
        var a = this.getAttribute('data-emoji');
        var textArea = document.createElement("textarea");
        textArea.value = a;
        document.body.appendChild(textArea);
        textArea.select();
        try {
            var successful = document.execCommand('copy');
            var msg = successful ? 'successful' : 'unsuccessful';
        } catch (err) {
            console.log('Oops, unable to copy');
        }
         document.body.removeChild(textArea);
    }
    
}

<ul style="display: block; column-count: 8;"><li>:first:<img class="emoji-image" src="https://www.gravatar.com/avatar/086495a58faa8219a2640ad87325a12d?s=48&d=identicon&r=PG&f=1" width="36" height="36" data-emoji=":first:"></li><li>:second:<img class="emoji-image" src="https://www.gravatar.com/avatar/086495a58faa8219a2640ad87325a12d?s=48&d=identicon&r=PG&f=1" width="36" height="36" data-emoji=":second:"></li></ul>

check accepted answer here , copy action is explained in more details.

Thank you so much! Spent hours looking all over for something like this. Saving this to my bookmark. :-) — BradTheBluefish, Jun 10 '21 at 13:09

Copy data attribute to clipboard on click with purejs

1 Answers1