How to copy the link href itself to the clipboard when clicked

Question

I'm trying to create a link that users can click on it, and then the href itself will be copied to the clipboard. Since I'm new to JS, I couldn't do it with the information I found, because I saw examples where people would click on a button to copy the url, or it would copy the URL of the address bar.

Here is my code, and + artworkUrl + is dynamically filled.

<a id="get-app-artwork" href="' + artworkUrl + '" target="_blank">Copy the cover URL</a>

How can I make this url be copied to the clipboard on click? Every option I found uses different approaches. As I'm new to this, I don't know how to apply to this situation, where I have a link and want to copy the URL of it when clicked.

Answer 1

Use the Clipboard API, specifically the writeText function.

<a href="' + artworkUrl + '" onclick="copyURI(event)">Copy cover URL</a>

function copyURI(evt) {
    evt.preventDefault();
    navigator.clipboard.writeText(evt.target.getAttribute('href')).then(() => {
      /* clipboard successfully set */
    }, () => {
      /* clipboard write failed */
    });
}

EDIT 18/07/2020 : There is a missing ) to properly close the writeText( function.

Answer 2

With jquery

$("a #get-app-artwork").click(function(event) {
    event.preventDefault();
    navigator.clipboard.writeText($(this).attr("href"));
 });