Skip to content
Advertisement

(Javascript) execCommand(‘copy’) copies text but adds extra white space to value

I have been scouring the internet all night to figure out how to use the execCommand(‘copy’) feature. Finally, found a solution on https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en that works incredibly well. However, my new dilemma is that when I press the button that copies the value from the input field it adds extra white space to it. So with a normal copy/paste action (Ctl+E and Ctl+V) the input value appears like this:

TESTTESTTESTTEST

But when I press the button to copy the input value to the clipboard it looks like this:

TEST

TEST

TEST

TEST

How do I remove the extra white space that the execCommand(‘copy’) adds to the value of the input field. I have tried .replace(” “, “”); but that does not work. I am unsure how to continue. Here is the code:

function copyValueToClipBoard(containerid) {
var valueToBeCopied = document.getElementById(containerid);
var range = document.createRange();
range.selectNode(valueToBeCopied);
window.getSelection().addRange(range);
  try {  
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy');  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('Copy email command was ' + msg);  
  } catch(err) {  
    console.log('Oops, unable to copy');  
  }  

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges(); 
  };
<!DOCTYPE html>
<html>
<head>
<title>Customer Information</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>

<b>First Name:</b><input type = "text" id = "firstName"/><button onclick = "copyValueToClipBoard('firstName')">Copy to Clipboard</button>
<textarea rows="50" cols="50"></textarea>
<br>
 </body>
</html>

Advertisement

Answer

The problem is with the selection. Window.getSelection normally works with element nodes and text nodes. In your case, you are selecting the whole input node, which gives you the result you have. With normal nodes, you could select the text node only, but inputs don’t have text nodes.

But inputs have setSelectionRange method, which allows to select the value only. Using selectionEnd property, you can select the whole value, but note the whole node. Like this:

function copyValueToClipBoard(containerid) {
var valueToBeCopied = document.getElementById(containerid);
valueToBeCopied.setSelectionRange(0, valueToBeCopied.selectionEnd)

  try {  
    // Now that we've selected the anchor text, execute the copy command  
    var successful = document.execCommand('copy');  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('Copy email command was ' + msg);  
  } catch(err) {  
    console.log('Oops, unable to copy');  
  }  

  // Remove the selections - NOTE: Should use
  // removeRange(range) when it is supported  
  window.getSelection().removeAllRanges(); 
  };
<!DOCTYPE html>
<html>
<head>
<title>Customer Information</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<body>

<b>First Name:</b><input type = "text" id = "firstName"/><button onclick = "copyValueToClipBoard('firstName')">Copy to Clipboard</button>
<textarea rows="50" cols="50"></textarea>
<br>
 </body>
</html>
Advertisement