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>
Copybutton → saves input text to clipboard.Pastebutton → 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.