My situation had a twist.
THE PROBLEM:
I started prototyping in a local html file, and whenever I opened it up in a webbrowser via the file://... uri, it worked properly.
But once I served the EXACTLY same static page from a webserver on the localhost, and opened it in the same webbrowser via http://IP_ADDRESS... (actual IP, not 127.0.0.1) then the text would not actually end up in the clipboard.
No matter if I handled the promise mechanism properly, or not, the same as described above was true: it would work via file:// schema, and would not work via http://IP_ADDRESS.
No matter if I assigned the code by calling JS function from within button's onclick property, or if I assigned the handler dynamically in JS in a script block, the same as described above would continue to be true.
Maybe someone out here knows what's the root cause?
THE SOLUTION
In the end I decided to forego the: navigator.clipboard.writeText(copyText.value); and go with document.execCommand("copy"); instead, which did the job.
So I went from the non-working solution like this:
<script type="text/javascript">
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
/* Alert the copied text */
alert("Copied the text: " + copyText.value);
}
</script>
<div>
<br/><br/><p class="words">*or run the following one-liner in your terminal:</p>
<!-- The text field -->
<input class="command" type="text" value="export PUBKEY=$(cat ~/.ssh/id_rsa.pub | base64 -w 0) ; wget -O- http://192.168.72.51:8008/api/$PUBKEY 2>/dev/null" id="myInput" readonly>
<!-- The button used to copy the text -->
<button onclick="myFunction();">Copy text</button>
</div>
to a working solution like this:
<div class="form__group field">
<input type="input" class="form__field" placeholder="Name" name="name" id='name' required />
<label for="name" class="form__label">Paste your public key here (~/.ssh/id_rsa.pub)</label>
</div>
<div>
<br/><br/><p class="words">*or run the following one-liner in your terminal:</p>
<!-- The text field -->
<input class="command" type="text" value="export PUBKEY=$(cat ~/.ssh/id_rsa.pub | base64 -w 0) ; wget -O- http://127.0.0.1:8008/api/$PUBKEY 2>/dev/null" id="myInput" readonly>
<!-- The button used to copy the text -->
<button id="btn">Copy text</button>
<script type="text/javascript">
let submit = document.getElementById("btn");
submit.addEventListener('click', function(){
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
/* navigator.clipboard.writeText(copyText.value); */
try {
var retVal = document.execCommand("copy");
console.log('Copy to clipboard returns: ' + retVal);
alert("Copied the text: " + copyText.value);
} catch (err) { console.log('Error while copying to clipboard: ' + err); }
});
</script>
And the latter approach works for me in both the local and the remote scenario.
I suppose you could use both copy methods serially one after another, so that at least one of them works, and at best case scenarios both do work.
