javascript - document.execCommand ('copy' ) 在不在 DOM 中的对象上？

Question

我不是 100% 确定如何描述这个，所以我将简单地粘贴三段相关代码。

我能做到:

var dl = $('<a>',{
    style: 'display: none',
    download: this.name + '.txt',
    href: window.URL.createObjectURL(data, {type: "octet/stream"}))
});
dl[0].click();

我可以做到:

copydeck = $("<textarea>").val(this.list.join("\r\n"));
$('body').append(copydeck);
copydeck.select();
document.execCommand('copy');
copydeck.remove();

但是我不能这样做:

copydeck = $("<textarea>").val(this.list.join("\r\n"));
copydeck[0].select();
document.execCommand('copy');

为什么？我在这里错过了什么？我是否无法选择或复制不在 DOM 中的元素？有没有办法在不将对象附加到正文的情况下执行此操作？

Answer 1

Why? What am I missing here?

textarea 不在 document 中，因此调用 document.execCommand('copy') 不会对其进行操作。请记住，可以有多个文档(与各种窗口相关，例如 iframe)，并且直到或除非元素在文档中，否则它...不在文档中。

您可能可以附加 textarea，发出命令，然后将其删除，而不会导致显示中发生任何事情。也就是说，对于我在 Linux 上使用 Chrome，您的代码最终不会将任何内容复制到剪贴板(无论我是从 DOM 中的 textarea 开始还是稍后动态添加它)，即使我将其放入 click 处理程序中(例如，直接响应用户事件)。