javascript - 如何一次将两个div的内容复制到剪贴板

Question

我正在使用如下所示的 jquery 将 contenteditable div 的内容复制到剪贴板。我需要能够将另一个 div 的内容附加到复制的内容中，以便将两个 div 的内容同时复制到剪贴板。

这是我目前拥有的代码：

  function copywithlink() {
      var target = document.getElementById('PreviewHeader');
      var range, select;
      if (document.createRange) {
        range = document.createRange();
          range.selectNode(target)
        select = window.getSelection();
        select.removeAllRanges();
        select.addRange(range);
        document.execCommand('copy');
        select.removeAllRanges();
      } else {
        range = document.body.createTextRange();
          range.moveToElementText(target);
        range.select();
        document.execCommand('copy');
      }
    }

我不仅需要能够复制“Preview Header”的内容，还需要复制另一个名为“HiddenURLdiv”的 div，以便同时将它们复制到剪贴板。

标签： javascriptjquery

Answer 1

为此，您需要能够捕获这两个内容，然后将它们附加到第三个元素。然后选择并复制。

这里有一个例子：

$("#copystuff").click(function() {
var temp = $("<input>");
 $("body").append(temp);
 
 var previewHeader = $("#PreviewHeader").text();
 var HiddenURLdiv = $("#HiddenURLdiv").text();
 var contentTogether = previewHeader + " " + HiddenURLdiv;
 
 temp.val(contentTogether).select();
 
 document.execCommand("copy");
 
 $("#thecopiedtext").text(contentTogether);
 
 temp.remove();
 
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #FFF;
}

a {
  color: #FFCC00;
}

#HiddenURLdiv {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="PreviewHeader">
 Hello stuff is here
</div>
<div id="HiddenURLdiv">
This one is hidden
</div>
<a href="#" id="copystuff">Copy Stuff</a>
<div id="thecopiedtext">

</div>