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

【问题标题】：How to copy the contents of two divs to the clipboard at one time如何一次将两个div的内容复制到剪贴板
【发布时间】：2019-08-08 20:48:59
【问题描述】：

我正在使用如下所示的 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，以便同时将它们复制到剪贴板。

【问题讨论】：

因此克隆两者的内容，将它们放入一个元素中，然后复制该元素。

标签： javascript jquery

【解决方案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>

【讨论】：

我认为这会起作用，除非我认为它不会从 PreviewHeader txt div 中捕获已编辑的文本。我认为它只会捕获从后面的代码发送到 PreviewHeader txt div 的原始文本。我以前遇到过这个问题，这就是我使用上面显示的 jquery 版本的原因。
它应该在您单击按钮时捕获 div 中的任何文本，无论那里有什么。在您单击按钮之前，它不会查看已放置的文本。
你的代码比我上面的更干净。两者都有效，但你的更有说服力。我确实需要做一些调整，因为在 previewHeader 和 HiddenURLdiv 变量中都引入了一些前导和尾随空格，有时在句子中间，但总体而言，代码运行良好。我将您的答案标记为答案，但我发布的另一个答案也有效。感谢您的帮助。

【解决方案2】：

这将捕获 contenteditable txt div 'PreviewHeader' 中的编辑。答案是在页面上放置三个文本 div 来保存要连接的两个文本项，第三个保存连接的版本。这些无法隐藏，但您可以使文本非常小并且与背景颜色相同，以使它们对用户不可见，如下所示：

<%--Below are hidden fields that help with the copy functions.  In addition to these "hidden" divs there is the PreviewHeader header div which is very visible on the page.--%>
            <asp:Panel ID="Panel1" runat="server" Visible="True">               
                <div class="row">
                    <div id="HiddenURLdiv" contenteditable="false" style="z-index: 1; font-size: 2px; color: white; text-align: left; border: 0px solid">
                        <span>
                            <asp:Literal ID="hiddenurlliteral" runat="server"></asp:Literal></span>
                    </div>
                </div>

                <div class="row">
                    <div id="HiddenWUandLink" contenteditable="false" style="z-index: 1; font-size: 2px; color: white; text-align: left; border: 0px solid"></div>
                </div>
            </asp:Panel>
            <%--Above are hidden fields that help with the copy functions--%>

然后您可以使用以下函数来创建和复制连接文本。

<%--Below script allows combining the text content of two divs into another third div and copying the content of the third div. --%>
    <script>
        function copywithlink() {
            var target = document.getElementById('PreviewHeader');
            var range, select;
            var target1 = document.getElementById('HiddenWUandLink');

            document.getElementById('HiddenWUandLink').innerHTML = ""

            if (document.createRange) {
                range = document.createRange();
                range.selectNode(target)
                document.getElementById('HiddenWUandLink').append(range.cloneContents(target.childNodes).textContent);
                document.getElementById('HiddenWUandLink').append(document.getElementById('HiddenURLdiv').innerText);

                var texttoedit = document.getElementById('HiddenWUandLink').innerText
                texttoedit = texttoedit.replace(/(\r\n|\n|\r)/gm, "");
                texttedit = texttoedit.trim()
                document.getElementById('HiddenWUandLink').innerText = texttoedit


                range = document.createRange();
                range.selectNode(target1);
                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');
          <%--Overall the above script is working good but it is adding a lf before the copied text.  This does not matter for my application.--%>
            }

【讨论】：