javascript - How can I get my Copy and Paste function to keep new line formatting? - Stack Overflow

admin管理员组

文章数量:1410737

I only need this to work on Google Chrome so there is no requirement for multi-browser patible code.

This is the JS function I use to copy the text to clipboard.

 // Copy text to clip-board JS
  
  function copy(txt){
    var cb = document.getElementById("cb");
    cb.value = txt;
    cb.style.display='block';
    cb.select();
    document.execCommand('copy');
    cb.style.display='none';
  }

 var var1='download here: \n www.link-to-download';

Here is my HTML

  <button class="buttonClass" onclick="copy(softwareinstall)">Install software</button>
    <textarea id="cb" style="display: none"></textarea>

When I click the button, it will copy to clipboard, however when I paste the content into somewhere else for example notepad and outlook, the text is all on one line and the \n does nothing.

I would like for the string to be split onto 2 seperate lines.

Thank you in advanced.

I only need this to work on Google Chrome so there is no requirement for multi-browser patible code.

This is the JS function I use to copy the text to clipboard.

 // Copy text to clip-board JS
  
  function copy(txt){
    var cb = document.getElementById("cb");
    cb.value = txt;
    cb.style.display='block';
    cb.select();
    document.execCommand('copy');
    cb.style.display='none';
  }

 var var1='download here: \n www.link-to-download.';

Here is my HTML

  <button class="buttonClass" onclick="copy(softwareinstall)">Install software</button>
    <textarea id="cb" style="display: none"></textarea>

When I click the button, it will copy to clipboard, however when I paste the content into somewhere else for example notepad and outlook, the text is all on one line and the \n does nothing.

I would like for the string to be split onto 2 seperate lines.

Thank you in advanced.

• javascript
• html
• copy
• copy-paste
• paste

Share Improve this question Follow edited Sep 16, 2020 at 9:58 srptn asked Sep 16, 2020 at 8:57 srptnsrptn 8111 silver badge1010 bronze badges 4

• try using \r\n for linebreaks. \n is the unix way. – Mark Baijens Commented Sep 16, 2020 at 9:52
• @MarkBaijens I have tried using \r\n and this has had no effect, I have \n working using a different method, so I don't think it's the \n which is causing it not to work. – srptn Commented Sep 16, 2020 at 10:39
• Your code works fine when changing var1 to softwareinstall – Mark Baijens Commented Sep 16, 2020 at 11:01
• @MarkBaijens Apologies, i wrote that out wrong on here, the actual code is correct. Still cant get it working. – srptn Commented Sep 16, 2020 at 11:22

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

If it is an option, you could easily preserve you text content by using navigator.clipboard.writeText() instead of document.execCommand() as that does not copy from the DOM. Something like:

const str = "Text \n on \n different lines";
navigator.clipboard.writeText(str).then(() =>
   console.log("copied")
);

This is because the input element doesn't support line breaks, so your \n gets lost. Try to use a textarea instead:

// Copy text to clip-board JS
  
  function copy(txt){
    var cb = document.getElementById("cb");
    cb.value = txt;
    cb.style.display='block';
    cb.select();
    document.execCommand('copy');
    cb.style.display='none';
  }

 var var1='first line of text \n second line of text';

<button onclick="copy(var1)">Copy Option 1</button>
<textarea id="cb" style="display: none"></textarea>

本文标签： javascriptHow can I get my Copy and Paste function to keep new line formattingStack Overflow