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

Question

我使用下面所示的jQuery将可内容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');
      }
    }

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

Answer 1

这将捕获contenteditable txt div“PreviewReader”中的编辑。答案是在页面上放置三个文本div，用于保存要连接的两个文本项，第三个文本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.--%>
            }

Answer 2

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

例如：

$("#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>