Clipboard API

TL;DR

Explanation

navigator.clipboard.writeText(text) and navigator.clipboard.readText() are Promise-based. For rich content: clipboard.write([new ClipboardItem({'text/html': blob})]).Read requires user permission (clipboard-read) and is only available in focused pages. Write usually doesn't require permission if triggered by user action. The old document.execCommand('copy') is deprecated — it only works synchronously and only with text. Security: clipboard access is restricted to secure contexts (HTTPS) and requires user gesture for write in some browsers.

Common Misconception

Why It Matters

Common Mistakes

• Using document.execCommand('copy') — deprecated and unreliable across browsers.
• Not wrapping clipboard operations in try/catch — permission denied throws.
• Calling readText() without user interaction — blocked by browsers.

Code Examples

// Deprecated approach:
document.execCommand('copy'); // Deprecated, unreliable

async function copyToClipboard(text) {
    try {
        await navigator.clipboard.writeText(text);
        showToast('Copied!');
    } catch (err) {
        // Fallback for older browsers:
        const el = document.createElement('textarea');
        el.value = text;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
    }
}

References

• ↗ https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

Tags

Related Terms