代码之家 › 专栏 › 技术社区 › Gucci

将文本从剪贴板复制到剪贴板

copy-paste clipboard copy html javascript

Gucci · 技术社区 · 6 年前

我一直想复制 innerContent 的 <span> 到我的剪贴板但未成功:

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() 不适用于 <跨度(>); 元素,因为我在这两个方面都出现以下错误:

3 回复 | 直到 6 年前

rafaelgomesxyz 6 年前

您可以这样做:创建一个临时文本区域并将其附加到页面,然后添加 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>

J. García 6 年前

看见 https://stackoverflow.com/a/48020189/2240670 有一段代码为您提供了一个div示例,它也适用于span,我没有将其复制到这里以避免重复。

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

创建/获取 Range 对象(某些浏览器不提供构造函数,也不提供合适的方法)。使命感 document.getSelection().getRangeAt(0) ,我在除edge之外的大多数浏览器上都找到了工作(虽然ie11也可以)。
将要从中复制的元素添加到该范围的选择中。
将该范围添加到窗口或文档 Selection .
呼叫 document.execCommand("copy") 复制所选文本。

我还建议检查的API 选择 和 范围 ,这将使您更好地了解这一点。

özgür köktürk 4 年前

简单方法
1) 创建输入
2) 给出样式 z指数-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>