How to Copy Text to Clipboard With Javascript.

To copy something to the clipboard you'll need window.navigator.clipboard. Yep, that's pretty much it. Not everything must be difficult.

Here is usage example:

window.navigator.clipboard.writeText("Hello World!");

Wanna see a real life example? Click "COPY URL" at the bottom of this post.

Copy to Clipboard with navigator.clipboard.writetext Example

<button data-url-copied-text="Copied!" onclick="copyURL()" role="button">Copy</button>

function copyURL() {
  this.event.preventDefault();

  const $button = this.event.target;
  const initialButtonText = $button.text;
  const urlCopiedButtonText = $button.getAttribute('data-url-copied-text');

  window.navigator.clipboard.writeText("https://abstractkitchen.com");

  $button.text = urlCopiedButtonText;
  setTimeout(function() {
    $button.text = initialButtonText;
  }, 500);
}

I hardcoded onclick="copyURL()", but you got the idea. As you can see, I went little further and implemented UI feedback with help of data-attribute data-url-copied-text, so your fellow visitors will feel more comfortable.

Cannot read properties of undefined reading 'writeText'

The use of navigator.clipboard requires a secure origin. You can create a workaround with hidden element and document.execCommand('copy'). I remember using such hacks back in the days, when jQuery was a thing, but it's up to you. I'm not gonna dive into the details — it's already well described here.