document.execCommand('copy') command add line feeds in the start and end of the string

Question

I have written this function to copy text to clipboard. It copies content but it add line feeds to the string copied.

function copyToClipboard(text) {
           // console.log("text",text);
            const textarea = document.createElement('textarea');
            textarea.textContent = text;
            document.body.appendChild(textarea);
            var selection = document.getSelection();
            var range = document.createRange();
            range.selectNode(textarea);
            selection.removeAllRanges();
            selection.addRange(range);
            const success = document.execCommand('copy');
            selection.removeAllRanges();
            document.body.removeChild(textarea);
            return success;
            console.log("now paste in the text area");
        }
        
      $('button').click(function () {
        copyToClipboard($('#ip').val());  
      })

textarea{
width:100%;
height: 200px;
border: 1px solid grey;
}
input{
min-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='ip' placeholder="insert some text and press copy"><button>Copy</button>
<textarea placeholder='perform paste in this textarea and you will see line feeds'>
</textarea>

If you run the snippet and follow instructions, you can see the line break in the text area.

What I have tried.

I have used below code to copy to clipboard, But due to some reason it is not working in my project. But it worked in other code bases, even in browser console. And it doesn't contain the line feeds.

function copyToClipBoard2(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.select();
  var successful = document.execCommand('copy');
  if (successful){
    console.log("copied to clipboard");
  }
  document.body.removeChild(textArea);}

How can I make it not to add line feeds to the copied text ?

That is weird indeed. I tried trim and removed the whitespace from the textarea tags — mplungjan, Dec 11 '20 at 18:14
let the question. Why first create a textarea element - `document.createElement('textarea');` and then delete it - `document.body.removeChild(textarea);`? — s.kuznetsov, Dec 11 '20 at 18:42
@sergeykuznetsov , thats how all of the example is. execCommand works on input types or textarea, Since I dont have an element I need to create a textarea on the fly and remove it after use. — NIKHIL C M, Dec 14 '20 at 07:32
@NIKHILCM, but you don't have to create the field with code. After all, you can declare it in html, and already refer to this field in the code. — s.kuznetsov, Dec 14 '20 at 07:40

score 2 · Answer 1 · answered Dec 15 '20 at 14:31

The problem is using selectNode

range.selectNode(textarea);

According to docs, the selectNode sets the parent node as range start

The Range.selectNode() method sets the Range to contain the Node and its contents. The parent Node of the start and end of the Range will be the same as the parent of the referenceNode.

If you cant use select(), then try using setSelectionRange()

function copyToClipboard(text) {
  const textarea = document.createElement('textarea');
  textarea.textContent = text;
  document.body.appendChild(textarea);
  textarea.focus();
  textarea.setSelectionRange(0, -1);
  const success = document.execCommand('copy');
  document.body.removeChild(textarea);
  return success;
}

$('button').click(function() {
  copyToClipboard($('#ip').val());
})

textarea {
  width: 100%;
  height: 200px;
  border: 1px solid grey;
}

input {
  min-width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='ip' placeholder="insert some text and press copy"><button>Copy</button>
<textarea placeholder='perform paste in this textarea and you will see line feeds'>
</textarea>

Alternatives

I endedup using clipboardjs library – NIKHIL C M Jan 16 '21 at 06:29 — NIKHIL C M, Jan 16 '21 at 06:29

Sandrin Joy · Answer 2 · 2020-12-29T06:19:31.593

Issue

document.body.appendChild(textArea);  //this line of code was the issue

not the document.execCommand("copy")

When appending the child to the parent , a new line is created every time.One way to Remove that new line is by clearing the html of the parent using parent.innerHTML.

First snippet only works Once, to show the effect of clearing innerHTML in the 2nd snippet

function copyToClipboard(text) {
            const textarea = document.createElement('textarea');
            
            textarea.textContent = text;
        
            document.getElementById("xyz").appendChild(textarea);
          
            var selection = document.getSelection();
         
            selection.removeAllRanges();
           
            var range = document.createRange();
          
            range.selectNode(textarea);
           
            selection.addRange(range);
           
            const success = document.execCommand('copy');
     
            selection.removeAllRanges();
           //document.getElementById("xyz").innerHTML="";
            return success;
        }
        
      $('button').click(function () {
        copyToClipboard($('#ip').val());
      })

textarea{
width:100%;
height: 50px;
border: 1px solid grey;
}
input{
min-width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='ip' placeholder="insert some text and press copy"><button>Copy</button>
<textarea placeholder='perform paste in this textarea and you will see line feeds'>
</textarea>
<div id="xyz"></div>

function copyToClipboard(text) {
            const textarea = document.createElement('textarea');
            
            textarea.textContent = text;
        
            document.getElementById("xyz").appendChild(textarea);
          
            textarea.focus();
        
            var selection = document.getSelection();
         
            selection.removeAllRanges();
           
            var range = document.createRange();
          
            range.selectNode(textarea);
           
            selection.addRange(range);
           
            const success = document.execCommand('copy');
     
            selection.removeAllRanges();
           document.getElementById("xyz").innerHTML="";
            return success;
        }
        
      $('button').click(function () {
        copyToClipboard($('#ip').val());
      })

textarea{
width:100%;
height: 50px;
border: 1px solid grey;
}
input{
min-width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id='ip' placeholder="insert some text and press copy"><button>Copy</button>
<textarea placeholder='perform paste in this textarea and you will see line feeds'>
</textarea>
<div id="xyz"></div>

document.execCommand('copy') command add line feeds in the start and end of the string

2 Answers2

Issue