Implementing One‑Click Copy in JavaScript: Clipboard API and Fallback Methods

In many IM chat windows, web code editors, or forum posts, a “one‑click copy” feature is often needed to let users quickly copy text or images.

The article first reviews the modern Clipboard API (navigator.clipboard.writeText and navigator.clipboard.write) and its compatibility, noting that newer browsers support it but some Android Firefox versions and WebViews may not.

It provides code examples for writing text:

navigator.clipboard.writeText("text to copy")
  .then(() => { /* success */ }, () => { /* failure */ });

and for writing images using ClipboardItem:

navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])
  .then(() => { /* success */ }, (error) => { /* failure */ });

Because the Clipboard API may be unavailable, the article also covers the deprecated but still supported fallback document.execCommand('copy') , showing how to copy text by creating a temporary textarea and invoking the command, and how to copy images by selecting an img element via getSelection() and createRange() .

Code snippets for the fallback methods are included, along with notes on required user interaction and permission considerations.

Finally, the article summarizes the recommended modern approach and the necessary compatibility layer for older environments.