Select variable string value

Question

I would like to take input from a text box, concatenate its value with a string, then copy it to the clipboard.

I get stuck at .select(), because it doesn't work with the variable. I inserted the alert before .select() to check its value, but that's okay. The alerted value should be copied to the clipboard.

function copyLink() {
  var siteNumber = document.getElementById("number");
  var home = "http://www.website.com/site";
  var link = home.concat(siteNumber.value);
  alert(link);
  link.select();
  document.execCommand("copy");
  alert("Copied the text: " + link);
}

<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>

[HTMLInputElement#select](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select) is only defined on HTMLInputElements. You can't call `select` on a string. You can put the string in an element and then select it using something like this: https://techoverflow.net/2018/03/30/copying-strings-to-the-clipboard-using-pure-javascript/ — Paul, Feb 20 '19 at 15:44

score 1 · Answer 1 · answered Feb 20 '19 at 15:45

It seems you need to append the value to the dom to select. For that case create a hidden input and add set its value to link. Then once copied again set it to empty string.

For string concatenation you can use +

function copyLink() {
  var siteNumber = document.getElementById("number");
  var home = "http://www.website.com/site";
  var link = home + siteNumber.value;
  let _h = document.getElementById('hiddenIp');
  _h.value = link
  //alert(link);
  _h.select();
  document.execCommand("copy");
  _h.value = '';
  alert("Copied the text: " + link);
}

<input type="text" id="number">

<button onclick="copyLink()">Copy input as link</button>

<input type='hidden' id='hiddenIp'>

score 0 · Accepted Answer · answered Feb 20 '19 at 15:46

The text to copy has to be in an element in the DOM, which is what you call select on (not a string). See comments:

function copyLink() {
  // Get the value
  var siteNumber = document.getElementById("number").value;
  // Build the link
  var link = "http://www.website.com/site" + siteNumber;
  // Create an input to put it in and append it to the DOM
  var input = document.createElement("input");
  input.value = link;
  document.body.appendChild(input);
  // Select and copy
  input.select();
  document.execCommand("copy");
  // Remove the temporary input
  document.body.removeChild(input);
  alert("Copied the text: " + link);
}

<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>

zmag · Answer 3 · 2019-02-20T16:03:50.423

select() only works with elements. You need to create one.

Or you can save value temporarily in the input element.

function copyLink() {
  var siteNumber = document.getElementById("number");
  var home = "http://www.website.com/site";
  var temp = siteNumber.value  

  siteNumber.value = home + temp
  siteNumber.select();
  document.execCommand("copy");
  alert("Copied the text: " + siteNumber.value);

  siteNumber.value = temp
}

<input type="text" id="number">
<button onclick="copyLink()">Copy input as link</button>

Select variable string value

3 Answers3