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

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

copy-paste clipboard copy html javascript

Gucci · 技术社区 · 8 年前

我一直想复制 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 回复 | 直到 8 年前

rafaelgomesxyz 8 年前

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

看见 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 5 年前

简单方法
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>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前