Clipboard Copy Status - JavaScript Client

The Clipboard API copies text after a button click and updates an output element when the promise resolves.

Program

Clipboard writes require user intent. A click handler can copy a generated value and report success to the user.

clipboard_copy_status.html

<button id="copy">Copy invite</button>
<output id="status">Ready</output>
<script>
  const copyButton = document.querySelector("#copy");
  const statusEl = document.querySelector("#status");
  copyButton.addEventListener("click", async () => {
    const invite = "EGTRY-2026";
    await navigator.clipboard.writeText(invite);
    statusEl.textContent = "Copied " + invite;
  });
</script>

Clipboard API navigator.clipboard exposes asynchronous clipboard read and write methods.

user gesture Browsers generally require a trusted user action before writing clipboard data.