使用jQuery单击“复制到剪贴板”按钮

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>

单击“复制文本”后，按下Ctrl+V，必须将其粘贴。

Answer 1

js是一个很好的实用程序，它允许在不使用Flash的情况下将文本或HTML数据复制到剪贴板。它非常容易使用；只需包含.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月发布的答案中引用了相同的API。前面的文本指示用户使用ZeroClipboard。我只想明确一点，我不是从JFriend00的答案中删除这个内容，而是从另一个方面删除这个内容。

Answer 2

更新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. 执行命令copy，如:document.execCommand（“copy”）。
5. 删除临时文本字段。

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

您可以在这里看到一个快速演示：

null

js prettyprint-override">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" />

Answer 3

自2016年起编辑

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

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

下面是一个代码示例：

null

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