Hidden element won't copy to clipboard

Question

I am trying to add button to copy simple text string but without success.

function kopiraj() {
  var copyText = document.getElementById("toCopy");
  copyText.select();
  document.execCommand("Copy");
  document.getElementById("telefon").innerHTML = 'Copied';
}

<button type="button" onclick="kopiraj()">Copy</button>
<input type="hidden" id="toCopy" value="123456789">
<p id="telefon"></p>

It does not put anything in Clipboard.

I do not need input field. I can add text in JS itself.

Answer 1

Instead of the hidden attribute, use an offscreen class and the aria-hidden attribute (the latter for accessibility):

.offscreen {
    position: absolute;
    left: -999em;
}

<input ... class="offscreen" aria-hidden="true">

Answer 2

You can't .select() a hidden element that has visibility: hidden; or display: none; but you can do something like this:

function kopiraj() {
  var copyText = document.getElementById("toCopy");
  copyText.select();
  document.execCommand("Copy");
}

[aria-hidden="true"] {
  opacity: 0;
  position: absolute;
  z-index: -9999;
  pointer-events: none;
}

<button type="button" onclick="kopiraj()">Copy</button>
<input type="text" id="toCopy" value="123456789" aria-hidden="true">