1

I've found this great code from plumwd, which I really love due to its simplicity and because one of the div's is hidden, but unfortunately it copies both contents in one single line:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style> #HiddenURLdiv {display: none;}</style>


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


<script>
    $("#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();
});
</script>

I've tried all the ways I know to break lines, wishing to get each div content on a separate line, but nothing seems to work.

I'm sure many of you know how to make this script to copy each div content on a separate line while keeping one of the div's hidden.

James Z
  • 12,209
  • 10
  • 24
  • 44
rx65m
  • 105
  • 6

2 Answers2

1

As mentioned in the comments you can have the two contacted with <br />, additionally you should use .html() or alternatively you can wrap your two elements in <div> (or any display block tags like <p>) tags since <div> have display:block by default:

$("#copystuff").click(function() {
    var temp = $("<input>");
    $("body").append(temp);

    var previewHeader = $("#PreviewHeader").text();
    var HiddenURLdiv = $("#HiddenURLdiv").text();
    var contentTogether = `<div>${previewHeader}</div><div>${HiddenURLdiv}</div>`;

    temp.val(`${previewHeader}${HiddenURLdiv}`).select();
    document.execCommand("copy");
    $("#thecopiedtext").html(contentTogether);
    temp.remove();
});
#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>
ROOT
  • 11,363
  • 5
  • 30
  • 45
  • 1
    you forgot to use `${}` And also, execCommand "copy" will now contain this: `
    previewHeader
    HiddenURLdiv
    `... Not sure it's the desired.     – Roko C. Buljan Jun 07 '20 at 12:28
  • Well, it prints the content in separate lines, but it copies both contents in one single line adding the
    tag in between: **Hello stuff is here
    This one is hidden**     – rx65m Jun 07 '20 at 12:43
  • @rx65m, seems you didn't change `$("#thecopiedtext").text(contentTogether);` to `$("#thecopiedtext").html(contentTogether);` notice that you have to change your code to use `.html()` – ROOT Jun 07 '20 at 12:49
  • I did, honestly, and it prints correctly in the html file, but in the clipboard it still shows the
    tags.     – rx65m Jun 07 '20 at 12:57
  • I updated my answer, please check it now!, basically the copy command was being executed on the html text that we constructed. – ROOT Jun 07 '20 at 13:02
  • No. Sorry ROOT, your update is not working at all. Maybe something is missing. – rx65m Jun 07 '20 at 13:12
  • ROOT I mean: It keeps copying both contents **in one single line at the clipboard**. Try it. Paste your clipboard content anywhere to see it. – rx65m Jun 07 '20 at 13:23
1
  1. Don't use <input> as it only support Single-line text and will remove line breaks
  2. Use \n to add new line
  3. Add white-space:pre to #thecopiedtext to render line breaks

$("#copystuff").click(function() {
  var temp = $("<textarea>");
  $("body").append(temp);

  var previewHeader = $("#PreviewHeader").text();
  var HiddenURLdiv = $("#HiddenURLdiv").text();
  var contentTogether = previewHeader + "\n" + HiddenURLdiv;

  temp.val(contentTogether).select();
  document.execCommand("copy");
  $("#thecopiedtext").text(contentTogether);
  temp.remove();
});
#HiddenURLdiv {
  display: none;
}

#thecopiedtext {
  white-space: pre;
}
<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>
Rainbow
  • 6,772
  • 3
  • 11
  • 28
  • THANK YOU **Zohir Salak** Now it is working just as I need. Thanks also to everyone else who helped trying to make this work! Very grateful with everyone of you! Always nice people here! – rx65m Jun 07 '20 at 14:24
  • Hello again Zohir Salak or @zohir-salak. I posted a new question related to this script, but so far nobody knows how to help me. All I want to know is how use your fantastic JQuery code to be used as a regular or vanilla JavaScript onmouseout, or as a jQuery mouseleave. Do you think you can help me? it is at: [link](https://stackoverflow.com/questions/62251073/how-to-edit-or-call-a-jquery-click-function-to-work-on-a-javascript-onmouseou) I very look forward to your reply. Thanks a lot in advance. – rx65m Jun 08 '20 at 02:02
  • It is important to let you know that changing the .click event to .mouseout or .mouseleave or .mousemove only triggers the printing (append) function, but not the copy one. Actually the copy function only happens after a click is done. – rx65m Jun 08 '20 at 08:17
  • Change `.click()` to `.mouseout()` ? https://jsfiddle.net/tek2qz9b/ – Rainbow Jun 08 '20 at 12:37
  • First of all, Thank you a lot, Zohir, it works perfectly in your jsfiddle. However, I really don't understand, because if I copy every thing to make it work on my files, and also at w3schools Tryit editor, codepen, cssdeck, jsbin, but it doesn't work the same. It only prints ((appends) in the file but it doesn't copy to clipboard. I tried several times and it doesn't work out of jsfiddle. Try it yourself. – rx65m Jun 08 '20 at 13:23
  • I just noticed it works on every case, but I need to first click any blank space in the page, then just hover the link to copy, if just hover this, after clicking any other element on the page, it only prints (appends) in the document without copying. Thanks a lot Zohir. – rx65m Jun 08 '20 at 13:32
  • Is there a way to make this code to do NOTHING when click on the link? I need it to work only on a mouseout event, without doing anything when I click on it, because I will use a different function when clicking on it. – rx65m Jun 08 '20 at 13:44
  • @rx65m You want to prevent whatever happens on mouseout when clicking, and only copy when you just hover without clicking ? – Rainbow Jun 08 '20 at 13:58
  • No. I need this script to do NOTHING when I click the #copystuff element, and only copy when I leave the #copystuff element. Right now it copies when I click, but I need it not to copy and not to do anything else when I click on it. – rx65m Jun 08 '20 at 14:32
  • @rx65m then just change `click()` to `mouseout()` if this doesn't work and i don't why it wouldn't work, provide a code snippet illustrating the issue. – Rainbow Jun 08 '20 at 14:40
  • I'm talking about your jsfiddle. You already changed `click()` to `mouseout()` in your jsfiddle! You can see in your jsfiddle it copies when you click. You already provided the code snippet illustrating the issue. – rx65m Jun 08 '20 at 14:50
  • @rx65m it doesn't copy when you click, when you reach out to click, You fire other events as well between them is `mouseout` This is why i asked `You want to prevent whatever happens on mouseout when clicking, and only copy when you just hover without clicking ?` and you said no so it obviously works as you want it – Rainbow Jun 08 '20 at 16:48
  • Seriously Zohir, it copies. I tested it many times, clicking on it, without moving the mouse but changing the window with Alt+Tab keys and paste it on windows notepad using ctrl+v keys. Try it and you will see it copies when clicking. It also conflicts with other functions I try to use with regular clicks. – rx65m Jun 08 '20 at 16:57
  • I just explained why it does that `Alt+Tab` is as good as moving the mouse away, and I asked you before if that is not what you want and you said no (re read the question i asked you above), Assume you answered Yes, you need what's called a debounce https://jsfiddle.net/qtLw0h4o/ – Rainbow Jun 08 '20 at 17:16
  • To me, your question was if I wanted to copy when hover, but no, I don't want it to copy when hovering. Because I need to first click the element to perform a shuffle of the child div's of a different element by using a different and already working function, and once they get shuffled I will copy them by simply moving away the mouse. Therefore I need it to do nothing when click, but to copy when move away the mouse. Right now if I click it copies the element content without allowing me to shuffle its child div's. The child div's don't get shuffle and get copied un-shuffled. – rx65m Jun 08 '20 at 17:53
  • Why don't you simply do both shuffle and copy when clicking And nothing on hover ? – Rainbow Jun 08 '20 at 18:49
  • Because it usually takes longer to shuffle than copy so one single click usually first copy then shuffles. – rx65m Jun 08 '20 at 18:57
  • If you're not doing any aysnc operations a single click event is sufficient, However if it's async then deferring copying to mouseout won't help you. – Rainbow Jun 08 '20 at 19:07
  • @rx65m Show you what exactly ? – Rainbow Jun 08 '20 at 23:08