Syntax
navigator.clipboard.writeText(text)
navigator.clipboard.readText()Examples
Copying Text to the Clipboard
A common "copy to clipboard" button implementation.
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log("Copied to clipboard!");
} catch (error) {
console.log("Failed to copy:", error.message);
}
}
document.querySelector("#copyButton").addEventListener("click", () => {
copyToClipboard("https://example.com/share-link");
});Reading from the Clipboard
Pasting programmatically, which requires explicit user permission.
async function pasteFromClipboard() {
try {
const text = await navigator.clipboard.readText();
console.log("Clipboard contains:", text);
} catch (error) {
console.log("Clipboard access denied or unavailable");
}
}Best practices
- Always wrap Clipboard API calls in try/catch - both permissions and browser support can cause them to fail
- Trigger clipboard writes directly from a user gesture (like a click handler) - browsers block clipboard access outside of direct user interaction
- Remember the API requires a secure context (HTTPS or localhost) - it will not work on plain HTTP
- Provide clear visual feedback (like a "Copied!" tooltip) after a successful copy, since there is no built-in browser indication
Runtime & versions
Browsers and JavaScript runtimes. Feature availability depends on the language and runtime version used by your project; consult the official reference below.
ECMAScript specification