单击按钮复制到剪贴板

Question

如何将div中的文本复制到剪贴板？我有一个div，需要添加一个链接，将文本添加到剪贴板。有解决办法吗？

<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<a class="copy-text">copy Text</a>

单击“复制文本”后，然后按CtrlV，必须粘贴该文本。

Answer 1

clipboard.js是一个很好的实用程序，允许复制文本或超文本标记语言数据到剪贴板，而不使用闪存。它非常容易使用；只要包含. js并使用这样的东西：

<button id='markup-copy'>Copy Button</button>

<script>
    document.getElementById('markup-copy').addEventListener('click', function() {
        clipboard.copy({
            'text/plain': 'Markup text. Paste me into a rich text editor.',
            'text/html': '<i>here</i> is some <b>rich text</b>'
        }).then(
            function(){console.log('success'); },
            function(err){console.log('failure', err);
        });
    });
</script>

clipboard.js也在GitHub上。

2016年1月15日编辑：今天编辑了顶部答案，以引用我在2015年8月发布的答案中的相同应用编程接口。之前的文本指示用户使用ZeroClipboard。我只是想说清楚，我并没有把这句话从j友00的答案中扯出来，而是反过来。

Answer 2

截至2016年编辑

从2016年起，您现在可以在大多数浏览器中将文本复制到剪贴板，因为大多数浏览器都能够使用对选定内容有效的document.execCommand（“copy”）以编程方式将选定的文本复制到剪贴板。

与浏览器中的某些其他操作（如打开新窗口）一样，复制到剪贴板只能通过特定的用户操作（如鼠标单击）完成。例如，它不能通过计时器来完成。

下面是一个代码示例：

document.getElementById("copyButton").addEventListener("click", function() {
    copyToClipboard(document.getElementById("copyTarget"));
});

function copyToClipboard(elem) {
	  // create hidden text element, if it doesn't already exist
    var targetId = "_hiddenCopyText_";
    var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
    var origSelectionStart, origSelectionEnd;
    if (isInput) {
        // can just use the original source element for the selection and copy
        target = elem;
        origSelectionStart = elem.selectionStart;
        origSelectionEnd = elem.selectionEnd;
    } else {
        // must use a temporary form element for the selection and copy
        target = document.getElementById(targetId);
        if (!target) {
            var target = document.createElement("textarea");
            target.style.position = "absolute";
            target.style.left = "-9999px";
            target.style.top = "0";
            target.id = targetId;
            document.body.appendChild(target);
        }
        target.textContent = elem.textContent;
    }
    // select the content
    var currentFocus = document.activeElement;
    target.focus();
    target.setSelectionRange(0, target.value.length);
    
    // copy the selection
    var succeed;
    try {
    	  succeed = document.execCommand("copy");
    } catch(e) {
        succeed = false;
    }
    // restore original focus
    if (currentFocus && typeof currentFocus.focus === "function") {
        currentFocus.focus();
    }
    
    if (isInput) {
        // restore prior selection
        elem.setSelectionRange(origSelectionStart, origSelectionEnd);
    } else {
        // clear temporary content
        target.textContent = "";
    }
    return succeed;
}

input {
  width: 400px;
}

<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">

Answer 3

更新2020：此解决方案使用execCommand。虽然在撰写本答案时，该功能还不错，但现在被认为已经过时。它仍然可以在许多浏览器上使用，但不鼓励使用，因为支持可能会被放弃。

还有另一种非Flash方式（除了jfriend00回答中提到的剪贴板API）。您需要选择文本，然后执行命令copy，将当前在页面上选择的任何文本复制到剪贴板。

例如，此函数将把传递的元素的内容复制到剪贴板（在来自PointZeroTwo的注释中使用建议进行更新）：

function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
}

这就是它的工作原理：

1. 创建一个暂时隐藏的文本字段。
2. 将元素的内容复制到该文本字段。
3. 选择文本字段的内容。
4. 执行命令复制，如：document.exec命令（"复制"）。
5. 删除临时文本字段。

请注意，元素的内部文本可以包含空格。因此，如果您想使用if（例如）作为密码，您可以在上面的代码中使用$（element）.text（）.trim（）来修剪文本。

您可以在此处看到一个快速演示：

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />