Web Clipboard API

The Clipboard API allows web applications to interact with the system clipboard, enabling reading from and writing to it. It is a modern browser API that replaces older execCommand methods, providing a safer and more reliable way to handle clipboard operations.

Note: Clipboard operations usually require user interaction (like a click or keypress) and must run on HTTPS for security reasons.

Key Features of Clipboard API

• Copy text to the clipboard using writeText().
• Read text from the clipboard using readText(), if permitted.
• Fully asynchronous, using Promises for smooth UI.
• Supports common use cases like copy buttons, paste handling, and custom shortcuts.
• Works on modern browsers with proper user interaction and HTTPS.

writeText() – Copy Text to Clipboard

The writeText() method writes a string to the clipboard.

navigator.clipboard.writeText("Hello World!")
  .then(() => console.log("Text copied!"))
  .catch((err) => console.error("Failed to copy text:", err));

Example: Copy Button

<input type="text" id="myText" value="Hello World!">
<button id="copyBtn">Copy Text</button>

<script>
const copyBtn = document.getElementById("copyBtn");
const input = document.getElementById("myText");

copyBtn.addEventListener("click", () => {
  navigator.clipboard.writeText(input.value)
    .then(() => alert("Text copied!"))
    .catch(err => console.error("Failed:", err));
});
</script>

readText() – Read Text from Clipboard

The readText() method reads plain text from the clipboard.

navigator.clipboard.readText()
  .then(text => console.log("Clipboard text:", text))
  .catch(err => console.error("Failed to read clipboard:", err));

Example: Paste Button

<button id="pasteBtn">Paste Text</button>
<p id="output">Clipboard text will appear here</p>

<script>
const pasteBtn = document.getElementById("pasteBtn");
const output = document.getElementById("output");

pasteBtn.addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    output.textContent = text;
  } catch (err) {
    console.error("Failed to read clipboard:", err);
  }
});
</script>

Advanced Example – Copy & Paste Together

<input type="text" id="inputText" placeholder="Type something">
<button id="copy">Copy</button>
<button id="paste">Paste</button>
<p id="display"></p>

<script>
const input = document.getElementById("inputText");
const display = document.getElementById("display");

document.getElementById("copy").addEventListener("click", () => {
  navigator.clipboard.writeText(input.value)
    .then(() => alert("Copied!"));
});

document.getElementById("paste").addEventListener("click", async () => {
  try {
    const text = await navigator.clipboard.readText();
    display.textContent = text;
  } catch (err) {
    console.error("Cannot read clipboard:", err);
  }
});
</script>

• Copy button → saves input text to clipboard.
• Paste button → retrieves clipboard text and displays it on the page.
• Provides a full interactive example for real-world usage.

Benefits of Using Clipboard API

• Simplifies copy-paste operations in web apps.
• Enables custom copy buttons and shortcuts.
• Works asynchronously, keeping the UI responsive.
• Secure and compatible with modern browsers.