将文本从 <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> 元素上不起作用，因为我在两个元素上都收到以下错误：

Answer 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>

Answer 2

参见有一段代码为您提供了 div 的示例，它也适用于跨度，我没有在此处复制它以避免重复。

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

Create/get 一个 Range 对象（一些浏览器不提供构造函数，或者一个合适的方法来做到这一点）。调用 document.getSelection().getRangeAt(0)，我发现除 edge 外，大多数浏览器都可以使用（ie11 可以）。
将要从中复制的元素添加到该范围的选择中。
将该范围添加到 window 或文档 Selection。
调用document.execCommand("copy")复制所选文本。

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

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>

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

Copy text from <span> to clipboard

html

javascript

clipboard

copy

copy-paste

HTML

JavaScript