开发者问题收集

点击按钮复制到剪贴板

2014-03-22
1112044
jquery html css

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

613744247

单击复制文本后，然后按 ctrl + + v ，必须粘贴它。

3个回答

Update 2020 : This solution uses execCommand . While that feature was fine at the moment of writing this answer, it is now considered obsolete . It will still work on many browsers, but its use is discouraged as support may be dropped.

还有另一种非 Flash 方式（除了 jfriend00 的回答 中提到的 Clipboard 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.execCommand("copy") 。
  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" />

主要问题是，目前并非所有 浏览器都支持 此功能，但您可以在以下主要浏览器上使用它：

  • Chrome 43
  • Internet Explorer 10
  • Firefox 41
  • Safari 10

更新 1：这也可以通过纯 JavaScript 解决方案实现（无需jQuery): 

function copyToClipboard(elementId) {

  // Create a "hidden" input
  var aux = document.createElement("input");

  // Assign it the value of the specified element
  aux.setAttribute("value", document.getElementById(elementId).innerHTML);

  // Append it to the body
  document.body.appendChild(aux);

  // Highlight its content
  aux.select();

  // Copy the highlighted text
  document.execCommand("copy");

  // Remove it from the body
  document.body.removeChild(aux);

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

请注意，我们现在传递的 id 不带 #。

正如 madzohan 在下面的评论中所报告的，在某些情况下（在本地运行文件），64 位版本的 Google Chrome 存在一些奇怪的问题。这个问题似乎已经通过上述非 jQuery 解决方案得到修复。

Madzohan 在 Safari 中尝试过，解决方案有效，但使用的是 document.execCommand('SelectAll') ，而不是使用 .select() （如聊天和以下评论中所述）。

正如 PointZeroTwo 在评论中指出 ，代码可以改进，以便返回成功/失败结果。您可以在 此 jsFiddle 上看到一个演示。

更新：复制时保留文本格式

正如 西班牙语版 StackOverflow 中的一位用户 指出的那样，如果您想逐字复制元素的内容，上面列出的解决方案非常有效，但是如果您想粘贴带有格式的复制文本（因为它被复制到 input type="text" 中，格式“丢失”），那么它们就没那么好用了。

一种解决方案是将其复制到可编辑内容的 div 中，然后以类似的方式使用 execCommand 进行复制。这里有一个示例 - 单击复制按钮，然后将其粘贴到下面的可编辑内容框中： 

function copy(element_id){
  var aux = document.createElement("div");
  aux.setAttribute("contentEditable", true);
  aux.innerHTML = document.getElementById(element_id).innerHTML;
  aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)"); 
  document.body.appendChild(aux);
  aux.focus();
  document.execCommand("copy");
  document.body.removeChild(aux);
}
#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>

而在 jQuery 中，它将是这样的： 

function copy(selector){
  var $temp = $("<div>");
  $("body").append($temp);
  $temp.attr("contenteditable", true)
       .html($(selector).html()).select()
       .on("focus", function() { document.execCommand('selectAll',false,null); })
       .focus();
  document.execCommand("copy");
  $temp.remove();
}
#target {
  width:400px;
  height:100px;
  border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button> 

<div id="target" contentEditable="true"></div>
Alvaro Montoro
2015-06-18

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

这是一个更高级的演示： https://jsfiddle.net/jfriend00/v9g1x0o6/

而且，您还可以使用 clipboard.js 获得一个预先构建的库，该库为您执行此操作。

答案的旧的、历史部分

出于安全原因，任何现代浏览器都不允许通过 JavaScript 直接复制到剪贴板。最常见的解决方法是使用 Flash 功能复制到剪贴板，该功能只能通过用户直接点击触发。

如前所述， ZeroClipboard 是一组流行的代码，用于管理 Flash 对象以执行复制。我用过它。如果浏览设备上安装了 Flash（排除移动设备或平板电脑），它可以工作。

下一个最常见的解决方法是将剪贴板绑定的文本放入输入字段，将焦点移到该字段并建议用户按 Ctrl + C 复制文本。

有关此问题的其他讨论和可能的解决方法可以在这些先前的 Stack Overflow 帖子中找到：

这些要求使用 Flash 的现代替代方案的问题已收到大量问题赞成票，但没有答案和解决方案（可能是因为不存在）：

Internet Explorer 和 Firefox 曾经有用于访问剪贴板的非标准 API，但它们的较新版本已弃用了这些方法（可能是出于安全原因）。

目前有一项 新兴标准努力 试图提出一种“安全”的方法来解决最常见的剪贴板问题（可能需要像 Flash 解决方案所要求的那样的特定用户操作），并且看起来它可能在最新版本的 Firefox 和 Chrome 中部分实现，但我尚未证实这一点。

jfriend00
2014-03-22

2024 年 2 月

自 2024 年起，您应该使用 Clipboard Api 。 

navigator.clipboard.writeText('text here you want to copy').then(function () {
    alert('It worked! Do a CTRL - V to paste')
}, function () {
    alert('Failure to copy. Check permissions for clipboard')
});

以下是有关 与剪贴板交互 的更多信息>

thalacker
2020-09-21