The Clipboard API can copy text after a visitor activates a control. Because clipboard access is permission- and context-sensitive, run it directly from the click handler and report when it is unavailable.

copyButton.addEventListener("click", async () => {
  try {
    await navigator.clipboard.writeText(textToCopy);
    status.textContent = "Copied";
  } catch {
    status.textContent = "Could not copy. Select the text and copy it manually.";
  }
});

Make the action understandable

  • Use a real button with a label such as “Copy link”.
  • Announce the result in a nearby status region when the message would otherwise be missed.
  • Keep the original text selectable so visitors have another way to copy it.

Handle browser restrictions

Clipboard writes generally require a secure context and a user gesture. Do not silently pretend copying succeeded when the promise rejects.

Test with keyboard activation and with clipboard permission denied. A clear fallback is better than a button that appears to work but leaves the clipboard unchanged.