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

Question

我知道这里有很多次问过这个问题,包括: 如何用JavaScript复制到剪贴板？或者如何使用jQuery将文本复制到客户端的剪贴板？,我缩小了范围:

条件:

1. 在谷歌浏览器中工作正常(如果跨浏览器会很好,但不是必需的)
2. 没有闪光灯

有这样的解决方案或解决方法吗？

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(定于2015年9月),但将被火狐41支撑.请注意,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/

Answer 2

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

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

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

浏览器支持:

Answer 3

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

var promise = navigator.clipboard.writeText(newClipText)

在这里阅读文档

Answer 4

变量字符串可以使用下面的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 5

实际上，对于那些想出这一点的人来说，我可以根据@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);
}