通过单击JavaScript中的注入元素将字符串复制到剪贴板中 [英] Copy string to clipboard initiated by click on injected element in JavaScript

问题描述

进一步的问题: 在Chrome中使用jQuery/js复制到剪贴板

上述问题的代码非常适合使用JavaScript将字符串复制到剪贴板，但是我需要通过用户单击注入元素来触发该过程.由于某种原因，如果注入了元素，代码将无法正常工作.

在下面的代码示例中，我添加了一个红色的?按钮并将其添加到正文中.请注意，单击它不会将所需的文本复制到剪贴板.为什么会这样?

_{(请注意，我根据个人喜好在jQuery中添加了自己的位)}

jsFiddle演示

 var elem = document.getElementById('test');
var elem2 = document.getElementById('test2');
var elem3 = document.getElementById('test3');
elem.onmouseup = function () {
    document.execCommand('copy');
}

elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

elem3.onclick = function () {
    document.execCommand('copy');
}

elem3.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'bonk custom contentt');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'bonkcustom content from click');
    }
});
$('body').prepend('<div id="test4" title="Click to copy text RAINBOX to clipboard">?</div>');
$(document).on('click', '#test4', function(e){
    document.execCommand('copy');
});
$(document).on('copy', '#test4', function(e){
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'Over the rainbox');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'Rainbox');
    }
}); 

 #test4{display:inline-block;background-color:tomato;font-size:1.2rem;padding:0 5px;border-radius:3px;cursor:pointer;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='test'>Select text, it'll copy on mouse up</div>
<div id='test2'>Copy text using ctrl-c</div>
<div id='test3'>Click here to copy text</div>
<div id='ta'><textarea cols="40" rows="5" placeholder="Test pasting here"></textarea></div> 

解决方案

使用e.originalEvent.clipboardData获取原始事件，而不是jQuery事件对象

 var elem = document.getElementById('test');
var elem2 = document.getElementById('test2');
var elem3 = document.getElementById('test3');
elem.onmouseup = function () {
    document.execCommand('copy');
}

elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

elem3.onclick = function () {
    document.execCommand('copy');
}

elem3.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'bonk custom contentt');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'bonkcustom content from click');
    }
});
$('body').prepend('<div id="test4" title="Click to copy text RAINBOX to clipboard">?</div>');
$(document).on('click', '#test4', function(e){
    document.execCommand('copy');
});
$(document).on('copy', '#test4', function(e){
    e.preventDefault();
    if (e.originalEvent.clipboardData) {
        e.originalEvent.clipboardData.setData('text/plain', 'Over the rainbox');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'Rainbox');
    }
}); 

 #test4{display:inline-block;background-color:tomato;font-size:1.2rem;padding:0 5px;border-radius:3px;cursor:pointer;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='test'>Select text, it'll copy on mouse up</div>
<div id='test2'>Copy text using ctrl-c</div>
<div id='test3'>Click here to copy text</div>
<div id='ta'><textarea cols="40" rows="5" placeholder="Test pasting here"></textarea></div> 

Further to this question: Copy to clipboard with jQuery/js in Chrome

The code from the above question works perfectly for copying a string to clipboard with JavaScript, but I need to trigger the process from a user click onto an injected element. For some reason, the code will not work if the element is injected.

In below code example, I added a red ? button and prepended it to the body. Note that clicking on it does not copy the desired text to clipboard. Why is that?

_{(Note that I added my bit in jQuery as a personal preference)}

jsFiddle demo

var elem = document.getElementById('test');
var elem2 = document.getElementById('test2');
var elem3 = document.getElementById('test3');
elem.onmouseup = function () {
    document.execCommand('copy');
}

elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

elem3.onclick = function () {
    document.execCommand('copy');
}

elem3.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'bonk custom contentt');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'bonkcustom content from click');
    }
});
$('body').prepend('<div id="test4" title="Click to copy text RAINBOX to clipboard">?</div>');
$(document).on('click', '#test4', function(e){
    document.execCommand('copy');
});
$(document).on('copy', '#test4', function(e){
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'Over the rainbox');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'Rainbox');
    }
});

#test4{display:inline-block;background-color:tomato;font-size:1.2rem;padding:0 5px;border-radius:3px;cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='test'>Select text, it'll copy on mouse up</div>
<div id='test2'>Copy text using ctrl-c</div>
<div id='test3'>Click here to copy text</div>
<div id='ta'><textarea cols="40" rows="5" placeholder="Test pasting here"></textarea></div>

解决方案

Use e.originalEvent.clipboardData to get original event, and not jQuery event object

var elem = document.getElementById('test');
var elem2 = document.getElementById('test2');
var elem3 = document.getElementById('test3');
elem.onmouseup = function () {
    document.execCommand('copy');
}

elem2.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content');
    }

});

elem3.onclick = function () {
    document.execCommand('copy');
}

elem3.addEventListener('copy', function (e) {
    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'bonk custom contentt');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'bonkcustom content from click');
    }
});
$('body').prepend('<div id="test4" title="Click to copy text RAINBOX to clipboard">?</div>');
$(document).on('click', '#test4', function(e){
    document.execCommand('copy');
});
$(document).on('copy', '#test4', function(e){
    e.preventDefault();
    if (e.originalEvent.clipboardData) {
        e.originalEvent.clipboardData.setData('text/plain', 'Over the rainbox');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'Rainbox');
    }
});

#test4{display:inline-block;background-color:tomato;font-size:1.2rem;padding:0 5px;border-radius:3px;cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id='test'>Select text, it'll copy on mouse up</div>
<div id='test2'>Copy text using ctrl-c</div>
<div id='test3'>Click here to copy text</div>
<div id='ta'><textarea cols="40" rows="5" placeholder="Test pasting here"></textarea></div>

这篇关于通过单击JavaScript中的注入元素将字符串复制到剪贴板中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！