0

I want to have an extra line break put in between each list item when someone copies the text from my site, since the bullet points don't copy. How can I do that?

The answer to this question just tells you how to add code to the beginning and/or end of copied text, I'd like to add code in between list items!

The code is pretty simple:

<div>
  <li>This is the first paragraph.</li>
  <li>This is the second.</li>
  <li>This is the third.</li>
</div>

<textarea>Copy &amp; paste here with breaks in between each list item.</textarea>

https://jsfiddle.net/cleo_not_chloe/pvn3ahtr/

Thanks!

Community
  • 1
  • 1
Cleo
  • 25
  • 6

1 Answers1

0
  • Use .on("copy", callback) to detect user copied a text using mouse or keyboard (Ctrl + c).
  • Use window.getSelection() to get selected text and customize it as you like remove, add or replace text. here i used .replace(/\n/g,"\n\n") to double each break line.
  • Use .on("paste", callback) event to set #textarea value with your customized copied text.
  • <textarea> should populated by plain text so use .val() not .innerHTML and .html().

//create global variable to store copied text.
var s;
//listen to copy for your element
$("#text").on("copy", function() {
  //get selected text while coping  
  s = window.getSelection().toString();
  //customize breaklines to be double
  s = s.replace(/\n/g, "\n\n");

  //add break line to the end and more text
  s += "\n" + "- More text says you are welcome";
  //HTML will displays as plain text in textarea
  s += "\n" + "- <p>Hello world</p>";

});
// listen to paste
$("#textarea").on("paste", function() {
  //set value with your customized copied text
  $("#textarea").val(s);
  return false;
});
li {
  list-style-type: none;
}
#savebox {
  float: right;
}
#textarea {
  height: 200px;
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text" contenteditable="true">
  <ul>
    <li>This is the first paragraph.</li>
    <li>This is the second.</li>
    <li>This is the third.</li>
  </ul>
</div>

<div id="savebox">
  <textarea id="textarea">Copy &amp; paste here with breaks in between each list item.</textarea>
</div>
Mamdouh Saeed
  • 2,302
  • 1
  • 9
  • 11
  • Thank you, that worked! I have another situation where I do want to add text into the pasted text, like the other question I linked to. Your codes don't seem to work together, though. Do you know how to combine them? I've updated my jsfiddle: https://jsfiddle.net/cleo_not_chloe/pvn3ahtr/5/ – Cleo Nov 10 '16 at 02:10
  • @Cleo You want to add HTML tags? – Mamdouh Saeed Nov 10 '16 at 02:12
  • I don't know, will that allow both things to happen? I'm pretty new to this. – Cleo Nov 10 '16 at 02:25
  • @Celo your fiddle used `.innerHTML` witch print your copied and customized text as html and its not targeted textbox. But here i used `.val()` witch print your HTML tags as plain text. see updated. and tell me you want to add extra text contains html for example clickable link inside textarea ? – Mamdouh Saeed Nov 10 '16 at 02:31
  • No, I think this should be good! Thank you, I really appreciate the explanatory comments! Helps me learn! – Cleo Nov 10 '16 at 02:35
  • @Celo You are appreciated :) – Mamdouh Saeed Nov 10 '16 at 02:39