从<span>复制文本到剪贴板

Question

我一直在尝试复制一个 <span> 元素的 innerContent 至剪贴板，但一直未能成功：

HTML

<span id="pwd_spn" class="password-span"></span>

JavaScript

函数调用

    document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('copy').addEventListener('click', copy_password);
});

功能

function copy_password() {
    var copyText = document.getElementById("pwd_spn").select();
    document.execCommand("Copy");
}

我也尝试了：

function copy_password() {
    var copyText = document.getElementById("pwd_spn").textContent;
    copyText.select();
    document.execCommand("Copy");
}

看起来.select()在<span>元素上不起作用，因为我在两个元素上都得到了以下错误：

- Gucci

---

https://dev59.com/-loV5IYBdhLWcg3wIb74 - epascarello

请查看此答案 https://dev59.com/fHRC5IYBdhLWcg3wJNcN?noredirect=1&lq=1 - gurvinder372

可能是如何在JavaScript中复制到剪贴板？的重复问题。 - freginold

Answer 1

你可以这样做：创建一个临时文本区域并将其附加到页面，然后将元素的内容添加到文本区域中，从文本区域复制值，最后删除文本区域。

由于某些安全限制，只有在用户与页面交互后才能执行“复制”命令，因此您需要添加一个按钮，并在用户单击该按钮后复制文本。

document.getElementById("cp_btn").addEventListener("click", copy_password);

function copy_password() {
    var copyText = document.getElementById("pwd_spn");
    var textArea = document.createElement("textarea");
    textArea.value = copyText.textContent;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand("Copy");
    textArea.remove();
}

<span id="pwd_spn" class="password-span">Test</span>
<button id="cp_btn">Copy</button>

- rafaelgomesxyz

---

这将丢失HTML标记，但如果他们只需要文本，那也不是什么大问题。 - epascarello

@epascarello 你的意思是因为文本区域被附加了吗？ - rafaelgomesxyz

谢谢您的想法。它已经成功运行了。 - iThanh

但是，@rafaelgomesxyz 先生/女士，您是如何想出这个想法的呢？ - Rohan Devaki

我发现这个不起作用，直到我将 document.execCommand("Copy") 更改为 document.execCommand("copy")。 - Randy Gamage

2021年底时在 Firefox 中也可以使用。 - lnstadrum

Answer 2

请参见https://dev59.com/-loV5IYBdhLWcg3wIb74#48020189，其中有一个代码片段，为您提供了一个关于

的示例，也适用于，我没有在此处复制它以避免重复。

基本上，在复制到剪贴板时，您需要创建文本选择，和<input>元素使其变得容易，因为它们具有select()方法，但如果您试图从任何其他类型的元素（例如<div>或<span>）中复制内容，则需要： <ol> <li>创建/获取Range对象(一些浏览器不提供构造函数或合适的方法来执行此操作)。 我发现调用document.getSelection().getRangeAt(0)在除Edge外的大多数浏览器上都可以工作(IE11可以工作)。</li> <li>将要从中复制的元素添加到该范围的选择中。</li> <li>将该范围添加到窗口或文档Selection中。</li> <li>调用document.execCommand("copy")来复制所选文本。</li> </ol> 我还建议检查Selection和Range的API，这将让您更好地掌握它。

- J. García

Answer 3

简单方法
1）创建一个输入框
2）给它样式z-index -1，它就会隐藏起来

    var code = $("#copy-to-clipboard-input");
    var btnCopy = $("#btn-copy");

    btnCopy.on("click", function () {
        code.select();
        document.execCommand("copy");
    });

                                                                                             
<input type="input" style="width:10px; position:absolute; z-index: -100 !important;" value="hello" id="copy-to-clipboard-input">
<button class="btn btn-success" id="btn-copy">Copy</button>

- özgür köktürk