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.
