如何在JS中将文本从div复制到剪贴板答案

【问题标题】：How to copy text from div to Clipboard in JS如何在JS中将文本从div复制到剪贴板
【发布时间】：2015-05-26 14:02:10
【问题描述】：

<!DOCTYPE html>
<html>
<head lang="en">
    <script src="bower_components/zeroclipboard/dist/ZeroClipboard.js"></script>
</head>
<body>

<div id="first">1111111</div>
<div id="second">2222222222</div>

<button id="d_clip_button" class="my_clip_button" data-clipboard-target="first">Copy from first div</button>
<button data-clipboard-target="second">Copy from second div</button>
</body>
</html>

但这对我不起作用。你能指出错误吗？我找不到合适的例子，因为它们已经过时了。

如果您能提出任何替代 zeroclipboard 的建议，我会考虑。

【问题讨论】：

我认为，您需要input/textarea 元素，我们可以在其中粘贴复制的文本。您正在使用div。尝试将div 替换为textbox
嗯，似乎它也应该与 div 一起使用。见line #996 in ZeroClipboard.js（很长，滚动一下）

标签： javascript html clipboard zeroclipboard

【解决方案1】：

这对我有用：

<div id="first">1111111</div>
<div id="second">2222222222</div>

<button id="button1" data-clipboard-target="first">Copy from first div</button>
<button id="button2" data-clipboard-target="second">Copy from second div</button>

<script>
    var zeroClipboard = new ZeroClipboard();
    zeroClipboard.clip(document.querySelector("#button1"));
    zeroClipboard.clip(document.querySelector("#button2"));

    zeroClipboard.on('copy', function(event) {

    });
</script>

【讨论】：

【解决方案2】：

我没用过，如果你愿意，这里是没有 zeroclipboard 2.2.0 的代码。

HTML

<div id="first">1111111</div>
<div id="second">2222222222</div>


<button onclick="copyToClipboard('#first')">Copy from first div</button>
<button onclick="copyToClipboard('#second')">Copy from second div</button>

JS：

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

【讨论】：