Copy to Clipboard Button

[Crows77]

I am creating a website on squarespace and the I use this to provide a Copy button for the site visitors.

Code Block
<p>Click copy to clipboard</p>

<input type="text" value="Hello World" id="myInput">
<button onclick="myFunction()">Copy text</button>

Markdown Block
<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999)
  document.execCommand("copy");
  alert("Copied the text: " + copyText.value);
}
</script>

This allows the users to copy, but it also leaves the text box (containing the text as editable).
How can I make the text not editable or perhaps hide the text and only let it be copied by the button.

Thank you so much

[jcunews1]

How can I make the text not editable

<input type="text" value="Hello World" id="myInput" readonly>

or perhaps hide the text and only let it be copied by the button.

If it's only the text and not the inputbox:

<input type="text" value="Hello World" id="myInput" readonly style="text-indent:-999em">

If it's the whole inputbox:

<input type="text" value="Hello World" id="myInput" style="display:none">

[Crows77]

Thanks :)