为什么使用 JavaScript 无法复制到剪贴板？

Question

我正在尝试这个 function：

function copyToClipboard(str) {

const el = document.createElement('textarea');
el.textContent = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected =
    document.getSelection().rangeCount > 0 ?
    document.getSelection().getRangeAt(0) :
    false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
}
alert("Success");}

我试过 el.value = str; 也。 我究竟做错了什么？

Answer 1

document.execCommand已被弃用，但仍可跨 web 浏览器访问

navigator.clipboard API是一个替代的navigator.clipboard

您将要复制到剪贴板的文本像这样传递

navigator.clipboard.writeText(str_to_copy).then(success_callback, failure_callback);

请注意，该选项卡必须处于活动状态才能正常工作，否则您将无权复制剪贴板

API 是异步的，因此您可以使用.then回调来提醒用户复制剪贴板是否成功。 查看Can I Use以了解其在 web 浏览器中的可用性。

Answer 2

使用这种方式将文本复制到剪贴板。

 function copyToClipboradFunc() { let copiedText = document.getElementById("copyMe"); copiedText.select(); copiedText.setSelectionRange(0, 99999); document.execCommand("copy"); console.log("Copied the text: " + copiedText.value); }

 <input type="text" value="Amoos Check Console" id="copyMe"> <button onclick="copyToClipboradFunc()">Copy to Clipboard</button>

对代码进行少量修改。

 /* YOUR CODE */ function copyToClipboard(str) { const el = document.createElement('textarea'); el.textContent = str; el.setAttribute('readonly', ''); el.style.position = 'absolute'; el.style.left = '-9999px'; document.body.appendChild(el); const selected = document.getSelection().rangeCount > 0? document.getSelection().getRangeAt(0): false; el.select(); document.execCommand('copy'); document.body.removeChild(el); if (selected) { document.getSelection().removeAllRanges(); document.getSelection().addRange(selected); } alert("Copy Text: " + str );}

 <!-- YOUR CODE --> <button onclick="copyToClipboard('Your Function Copied')">Copy ( Original Function )</button>

Answer 3

您正在创建一个将在瞬间附加到 DOM 的元素，只是为了允许execCommand("copy") ... 并且它将在左侧“显示” -9999px 。

那么为什么el.setAttribute('readonly', ''); ?

只需将其删除并重试。 我的猜测是el.select(); 只是不适用于readonly元素。

免责声明：我没有进行任何测试。 但从我读到的，这是唯一值得一提的奇怪的事情。 否则是找到重复的答案或将其标记为不可重现。

Answer 4

好吧，经过一番研究，我找到了解决方案。 感谢@VLAZ 和@a.mola，我发现 execCommand 已被弃用。 于是我开始寻找替代品。 我在此页面上找到了有关剪贴板 API 使用剪贴板 API ，来自https://developer.mozilla.org/的业务，所以我们知道。 无论如何，这是我的工作 function：

 function copyToClipboard(str) { navigator.permissions.query({ name: "clipboard-write" }).then(result => { if (result.state == "granted") { navigator.clipboard.writeText(str).then(function () { alert("Enlace copiado con succeso;"), }. function () { alert("No fue posible copiar el enlace;"); }); } }); };