javascript - 在 Chrome 中使用 jQuery/js 复制到剪贴板

Question

我知道这种问题在这里被问过很多次了，包括:How do I copy to the clipboard in JavaScript?或 How to copy text to the client's clipboard using jQuery? ，我正在缩小范围:

条件:

1. 在谷歌浏览器中运行良好(如果跨浏览器会很好，但不是必需的)
2. 没有闪光灯

是否有这样的解决方案或解决方法？

Answer 1

您可以使用 document.execCommand('copy') 或 addEventListener('copy') 或两者的组合。

<强>1。复制自定义事件的选择

如果你想在 ctrl-c 或右键单击复制之外的其他事件上触发 copy，你可以使用 document.execCommand('copy') 。它将复制当前选择的内容。像这样，以 mouseup 为例:

elem.onmouseup = function(){
    document.execCommand('copy');
}

编辑:

document.execCommand('copy') 仅受 Chrome 42、IE9 和 Opera 29 支持, 但将受 firefox 41(计划于 2015 年 9 月发布)的支持。请注意，IE 通常会请求访问剪贴板的权限。

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

<强>2。在用户触发的副本上复制自定义内容

或者，你可以使用addEventListener('copy')，这会干扰复制事件，你可以把你想要的内容放在那里。这假设用户触发复制。

编辑:

在 Chrome、Firefox 和 Safari 上，事件具有 clipboardData 对象和 setData 方法。在 IE 上，clipboardData 对象是一个窗口属性。因此，只要您验证 clipboardData 在哪里，这就可以在所有主要浏览器上运行。

 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');
    }

});

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx

<强>3。两者兼而有之

使用组合，您可以复制所需事件的自定义内容。所以第一个事件触发 execCommand，然后 listener 进行干预。例如，将自定义内容放在点击 div 上。

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

   elem3.addEventListener('copy', function (e) {

    e.preventDefault();
    if (e.clipboardData) {
        e.clipboardData.setData('text/plain', 'custom content from click');
    } else if (window.clipboardData) {
        window.clipboardData.setData('Text', 'custom content from click');
    }

});

使用最后一个假设两种方法都受支持，截至 2015 年 7 月，它仅适用于 Chrome 43(也许 42 我无法测试)和 IE至少 9 和 10。Firefox 41 支持 execcommand('copy')，它应该也能正常工作。

请注意，这些方法和属性中的大多数都被声明为实验性的(甚至在 IE 中已弃用)，因此要谨慎使用，但看起来它越来越受到支持。

摆弄所有示例:https://jsfiddle.net/jsLfnnvy/12/