为什么使用 JavaScript 复制到剪贴板不起作用？

Question

我正在尝试这个功能：

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

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

 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 2

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

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

只需删除它，然后重试。我的猜测是 el.select(); 对 readonly 元素不起作用。

免责声明：我没有测试任何东西。但据我所读，这是唯一值得一提的奇怪事情。否则就是找到重复的答案或将其标记为 unreproducible.

Answer 3

document.execCommand 已被弃用，但仍可通过网络浏览器访问

navigator.clipboard API是另一种选择navigator.clipboard

你像这样传入要复制到剪贴板的文本

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

请注意，此选项卡必须处于活动状态，否则您将无权复制剪贴板

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

Answer 4

好吧，经过一番研究，我找到了解决方案。感谢@VLAZ 和@a.mola 我发现 execCommand 已被弃用。所以我开始寻找替代品。我在本页 Using the Clipboard API, that's from https://developer.mozilla.org/ 上发现了有关剪贴板 API 的信息，所以我们知道这是严肃的事情。不管怎样，这是我的工作函数：

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.");
            });
        }
    });
};

为什么使用 JavaScript 复制到剪贴板不起作用？

Why copy to clipboard doesn't work using JavaScript?

javascript

clipboard

copy-paste