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

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 方式(除了 Clipboard API 中提到的 jfriend00's answer )。您需要选择文本，然后选择 execute the command 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" />

主要问题是并非所有 browsers support目前此功能，但您可以在以下主要功能上使用它:

• Chrome 43
• Internet Explorer 10
• 火狐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 points out in the comments ，可以改进代码，使其返回成功/失败结果。您可以在 this jsFiddle 上看到演示.

<小时/>

更新:复制保留文本格式

作为 user pointed out in the Spanish version of StackOverflow ，如果您想按字面复制元素的内容，上面列出的解决方案非常有效，但如果您想使用格式粘贴复制的文本(因为它被复制到 input type= “文本”，格式为“丢失”)。

解决方案是将其复制到内容可编辑的 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>