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

【问题标题】：Copy text from <span> to clipboard将文本从 <span> 复制到剪贴板
【发布时间】：2018-03-12 13:10:16
【问题描述】：

我一直在尝试将<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> 元素，因为我在两者上都收到以下错误：

【问题讨论】：

stackoverflow.com/questions/36639681/…
查看这个答案stackoverflow.com/questions/400212/…
How do I copy to the clipboard in JavaScript?的可能重复

标签： javascript html copy clipboard copy-paste

【解决方案1】：

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

由于某些安全限制，如果用户与页面交互，您只能执行Copy 命令，因此您必须添加一个按钮并在用户单击该按钮后复制文本。

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>

【讨论】：

这会丢失 HTML 标记，但如果它们只是在文本之后，则没什么大不了的。
@epascarello 你的意思是因为附加了文本区域？
感谢您的想法。运行成功
但是你是怎么想到@rafaelgomesxyz 先生/妈妈的？
我发现这不起作用，直到我将document.execCommand("Copy")更改为document.execCommand("copy")

【解决方案2】：

参见https://stackoverflow.com/a/48020189/2240670 有一个sn-p 代码，它为您提供了一个div 的示例，这也适用于span，我没有在这里复制它以避免重复。

基本上，当您复制到剪贴板时，您需要创建一个文本选择，<textarea> 和 <input> 元素使这很容易，因为它们有一个 select() 方法，但是如果您尝试从任何其他类型的元素，如 <div> 或 <span>，您需要：

创建/获取Range 对象（某些浏览器不提供构造函数，或者不提供这样做的好方法）。调用document.getSelection().getRangeAt(0)，我发现大多数浏览器都可以使用，除了edge（ie11 可以）。
将要从中复制的元素添加到该范围的选择中。
将该范围添加到窗口或文档Selection。
致电document.execCommand("copy") 复制所选文本。

我还建议检查Selection 和Range 的API，这将使您更好地掌握这一点。

【讨论】：

【解决方案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>

【讨论】：