Question

我知道这里已经多次询问过这类问题，包括：How do I copy to the clipboard in JavaScript?或How to copy text to the client's clipboard using jQuery?，我缩小范围：

条件：

在Google Chrome中运行良好（如果是跨浏览器会很好，但不是必需的）
没有闪光

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

Answer 1

您可以使用document.execCommand('copy')或addEventListener('copy')，也可以两者兼而有之。

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

如果您想在copy之外的其他事件上触发ctrl-c或右键单击复制，则使用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的{{1}}，也应该有效。

请注意，对于大多数这些方法和属性都被声明为实验性的（甚至不推荐用于IE），所以要小心使用它，但它看起来越来越受支持。

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

Answer 2

我只是在Github找到另一个惊人的回购。

现代复制到剪贴板。没有Flash。只需3kb gzipped

https://github.com/zenorocha/clipboard.js

浏览器支持：

Answer 3

变量字符串可以使用以下js代码复制到剪贴板。

var text = 'text to copy';
var copyFrom = $('<textarea/>');
copyFrom.css({
 position: "absolute",
 left: "-1000px",
 top: "-1000px",
});
 copyFrom.text(text);
 $('body').append(copyFrom);
 copyFrom.select();
 document.execCommand('copy');

Answer 4

实际上，对于那些搞清楚这一点的人，我根据@JulianGregoire的回答让它在chrome中工作。

我重写了代码，以便在我看来更好一些：

el.onclick = function () {
    var copy = function (e) {
        e.preventDefault();
        console.log('copy');
        var text = "blabla"
        if (e.clipboardData) {
            e.clipboardData.setData('text/plain', text);
        } else if (window.clipboardData) {
            window.clipboardData.setData('Text', text);
        }
    }
    window.addEventListener('copy', copy);
    document.execCommand('copy');
    window.removeEventListener('copy', copy);
}

Answer 5

如果您不介意IE/Safari，则可以使用以下（新）API：

var promise = navigator.clipboard.writeText(newClipText)

Read the docs here

Answer 6

注意：我尝试了与JulienGrégoire完全相同的脚本，但它没有触发oncopy事件监听器。原因是，我有用户选择body标签的CSS。

因此请确保将其删除，或将其设置为事件侦听器所附加元素的initial。

示例：https://jsfiddle.net/faimmedia/jsLfnnvy/80/

Answer 7

如果你正在使用淘汰赛，就像我一样（出于某些原因我还是），你会想看看这个问题/答案：

How to make KnokoutJS and ClipboardJS work together?

Answer 8

function copyToClipboard(s) {
    if (window.clipboardData && clipboardData.setData) {
        clipboardData.setData('text', s);
    }
}

然后使用文本调用该函数，这应该可以。

使用Chrome中的jQuery / js复制到剪贴板

8 个答案: