Copy to clipboard HTML

Question

I'm creating a small site to generate amazon affiliate link using asin I used a small script to generate the URL but I'm looking to copy the output in the clipboard directly.

I looked around without finding a suitable solution for my problem.

Here is the script I'm using to generate the URL.

The HTML part is just an input and a button.

<script>
    function myFunction() {
        let userInput = document.querySelector("#userInput");
        let url = document.querySelector("#url");
        
        url.innerHTML = "https://www.amazon.it/dp/" + userInput.value + "/ref=nosim?tag=altpe-21";
    }
</script>

Probably using a library like e.g. https://clipboardjs.com would fit your needs? — Uwe Keim, Jun 28 '22 at 17:36
Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Kongulov, Jun 28 '22 at 17:37

score 0 · Answer 1 · answered Jun 28 '22 at 17:38

If you want a simple solution you'll have to create another function once the link is already created and up in the website.

The new function will use the document.getElementById() function and the .select() method

example and implementation can be found here:

https://www.w3schools.com/howto/howto_js_copy_clipboard.asp

score 0 · Accepted Answer · answered Jun 28 '22 at 17:38

You can use the Clipboard API in the navigator for this purpose.

<script>
    function myFunction() {
        let userInput = document.querySelector("#userInput");
        let url = document.querySelector("#url");
        
        let output = "https://www.amazon.it/dp/" + userInput.value + "/ref=nosim?tag=altpe-21";
        url.innerHTML = output;

        navigator.permissions.query({name: "clipboard-write"}).then(result => {
            if (result.state == "granted" || result.state == "prompt") {
                 navigator.clipboard.writeText(output);
            }
        });

    }
</script>

Please, mark this answer so that it can help others. – Khalil Jun 28 '22 at 18:08 — Khalil, Jun 28 '22 at 18:08

score 0 · Answer 3 · answered Jun 28 '22 at 17:41

Here is the simple solution:

/* 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);

Copy to clipboard HTML

3 Answers3