input.select() not working when input is hidden

Question

I want to copy the input value when I click the div, but I can't get it to work. Here is my code:

function handleClick() {
    input.select();
    document.execCommand("copy");
}

#input {
  display: none
}

<div click="handleClick()">
  <input type="text" value="test" id="input">
</div>    

When I remove the css style of display: none, it works.

Why can't I hide the input element? I just want to use input's .select(), but don't want input show in my page, how can I do this?

Answer 1

You can use opacity... instead of visibility (but the element will be there ocupping space...) or you can use position: absolute + top: -100px for example.

function handleClick() {
  var input = document.getElementById("input");
  //var input = document.getElementById("input2"); //Use this class to test with other possibility 
  input.focus();
  input.select();
  var copy = document.execCommand("copy");    
  console.log("copied");
}

#input {
  opacity: 0
}

/* Use this class to test with other possibility */
#input2{
  position: absolute;
  top: -100px;
}

#clicker{
  width: 250px;
  height: 75px;
  border: 1px solid;
}

<div id='clicker' onclick="handleClick()">
  <input type="text" value="test" id="input">
</div>
<br>
<input placeholder="Click DIV then PASTE here..."/>