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

Copy text from <span> to clipboard

提问by Gucci

I've been trying to copy the innerContentof a <span>to my clipboard without success:

我一直在试图复制innerContent的<span>，以我的剪贴板没有成功：

HTML

HTML

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

JavaScript

JavaScript

Function Call

函数调用

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

Function

功能

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

I've also tried:

我也试过：

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

It seems like .select()doesn't work on a <span>element since I get the following error on both:

似乎.select()对<span>元素不起作用，因为我在两个元素上都收到以下错误：

回答by rafaelgssa

You could do this: create a temporary text area and append it to the page, then add the content of the spanelement to the text area, copy the value from the text area and remove the text area.

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

Because of some security restrictions you can only execute the Copycommand if the user interacted with the page, so you have to add a button and copy the text after the user clicks on the button.

由于某些安全限制，您只能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>

回答by J. García

See https://stackoverflow.com/a/48020189/2240670there is a snippet of code for that gives you an example for a div, that also applies to a span, I did not copy it here to avoid duplication.

请参阅https://stackoverflow.com/a/48020189/2240670有一段代码，它为您提供了一个 div 示例，这也适用于跨度，我没有在这里复制它以避免重复。

Basically, when you are copying to clipboard you need to create a selection of text, <textarea>and <input>elements make this easy because they have a select()method, but if you are trying to copy contents from any other type of element like a <div>or <span>, you'll need to:

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

1. Create/get a Rangeobject(some browsers do not provide a constructor, or a decent way to do this). Calling document.getSelection().getRangeAt(0), I found works on most browsers except edge(ie11 works though).
2. Add the element you want to copy from to that range's selection.
3. Add that range to the window or document Selection.
4. Call document.execCommand("copy")to copy the selected text.

1. 创建/获取一个Range对象（一些浏览器不提供构造函数，或一个体面的方法来做到这一点）。调用document.getSelection().getRangeAt(0)，我发现除了 edge 之外的大多数浏览器都可以工作（尽管 ie11 可以工作）。
2. 将要从中复制的元素添加到该范围的选择中。
3. 将该范围添加到窗口或文档Selection。
4. 调用document.execCommand("copy")以复制所选文本。

I also recommend checking the API of Selectionand Range, that will give you a better grasp of this.

我也建议检查的APISelection和Range，会给你的这一个更好的把握。