0

I am using jquery shown below to copy the contents of a contenteditable div to the clipboard. I need to be able to append the contents of another div to the copied contents so that the contents of both divs are copied to the clipboard at the same time.

This is the code that I currently have:

  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');
      }
    }

I need to be able to copy not only the contents of "Preview Header" but also another div called "HiddenURLdiv" so that they are both copied to the clipboard simultaneously.

shmosel
  • 49,289
  • 6
  • 73
  • 138
Jamie
  • 555
  • 3
  • 14

2 Answers2

1

To do this you need to be able to capture both the contents and then append them to a 3rd element. Then select and copy.

An example is here:

$("#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>
elke_wtf
  • 887
  • 1
  • 14
  • 30
  • I think this would work except I don't think it will capture the edited text from the PreviewHeader txt div. I think it will just capture the original text as sent to the PreviewHeader txt div from the code behind. I had that problem previously and that is why I used the jquery version shown above. – Jamie Aug 09 '19 at 01:24
  • It should capture whatever text is in the div at the time that you click the button regardless of what is there. It doesn't look to see what text is in place until you click the button. – elke_wtf Aug 09 '19 at 13:04
  • 1
    Your code is cleaner than mine above. Both work but yours is more eloquent. I did have to do some tweaking because some leading and trailing white space was introduced into both the previewHeader and HiddenURLdiv variables and sometimes in the middle of sentences but overall, the code works well. I marked your answer as the answer but the other answer that I posted also works. Thanks for your help. – Jamie Aug 11 '19 at 12:38
0

This will capture edits in the contenteditable txt div 'PreviewHeader'.The answer is to put three text divs on your page to hold the two text items that you want to concatenate and the third one to hold the concatenated version. These cannot be hidden but you can make the text very small and the same color as the background to make them invisible to the user as follows:

<%--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--%>

Then you can use the following function to create and copy the concatenated text.

<%--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.--%>
            }
Jamie
  • 555
  • 3
  • 14