Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The Clipboard API lets you copy and read text from the user's clipboard. Perfect for "copy to clipboard" buttons, sharing links, or copying code snippets!
Try copying text with one click!
<div style="max-width: 600px; margin: 0 auto; font-family: sans-serif;">
<h2 style="color: #9333ea; margin-bottom: 20px;">📋 Clipboard Demo</h2>
<!-- Text to copy -->
<div style="background: #f3e8ff; padding: 20px; border-radius: 8px; margin-bottom: 20px; border: 2px solid #d8b4fe;">
<h3 style="color: #7c3aed; margin-top: 0;">Text to Copy:</h3>
<textarea id="textInput" style="width: 100%; padding: 12px; border: 2px solid #c084fc; border-radius: 6px; font-family: monospace; font-size: 14px; min-height: 100px;">Hello from Clipboard API! 👋
This text will be copied to your clipboard.</textarea>
</div>
<!-- Copy button -->
<button id="copyBtn" style="padding: 12px 24px; background: #9333ea; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 16px; width: 100%; margin-bottom: 15px;">
📋 Copy to Clipboard
</button>
<!-- Status message -->
<div id="status" style="padding: 12px; border-radius: 6px; text-align: center; font-weight: 600; display: none;"></div>
<!-- Paste area -->
<div style="background: #fef3c7; padding: 20px; border-radius: 8px; margin-top: 20px; border: 2px solid #fcd34d;">
<h3 style="color: #d97706; margin-top: 0;">Paste Area (try Ctrl/Cmd+V):</h3>
<textarea id="pasteArea" placeholder="Paste here to verify..." style="width: 100%; padding: 12px; border: 2px solid #fbbf24; border-radius: 6px; font-family: monospace; font-size: 14px; min-height: 100px;"></textarea>
</div>
</div>Loading preview...
// Copy text to clipboard
async function copyToClipboard(text) {
try {
await navigator.clipboard.writeText(text);
console.log('Text copied!');
} catch (error) {
console.error('Failed to copy:', error);
}
}
// Usage: Copy button
document.getElementById('copyBtn').addEventListener('click', () => {
const text = document.getElementById('textInput').value;
copyToClipboard(text);
});
// Copy a specific value
copyToClipboard('Hello, World!');
// 🎯 Common use: "Copy link" buttons// Read text from clipboard (requires user permission)
async function pasteFromClipboard() {
try {
const text = await navigator.clipboard.readText();
console.log('Pasted text:', text);
return text;
} catch (error) {
console.error('Failed to read clipboard:', error);
// User denied permission or browser blocked it
}
}
// Usage: Paste button
document.getElementById('pasteBtn').addEventListener('click', async () => {
const text = await pasteFromClipboard();
if (text) {
document.getElementById('textArea').value = text;
}
});
// ⚠️ Note: Reading requires user permission!
// Browser will show a permission prompt"Copy code" buttons on documentation sites
Copy share URLs with one click
Copy email addresses, phone numbers
One-click coupon code copying
await navigator.clipboard.writeText('text');const text = await navigator.clipboard.readText();⚠️ Permission: Reading requires user permission prompt
Copy text to clipboard
No permission needed
Read from clipboard
Requires permission
Returns promises
Use async/await
Show success feedback
Handle errors gracefully
document.execCommand() method!