使用 purejs 单击时将数据属性复制到剪贴板

Question

我有图片列表。我想在单击时将数据属性复制到剪贴板。我现在拥有的是警报数据属性。我试过复制命令，但没有用（不要复制任何东西）。拜托，有人可以帮我吗？

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>

Answer 1

如果屏幕上有可见的文本区域或输入元素，复制命令 的想法非常有效。
所以创建一个将文本放入其中，复制文本区域内容，然后将其删除。

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>

检查接受的答案here，复制操作有更详细的解释。

使用 purejs 单击时将数据属性复制到剪贴板

Copy data attribute to clipboard on click with purejs

html

javascript

pure-js