Copy to Clipboard in the Browser
Copy to clipboard function with a fallback method for browsers that don’t support Clipboard.writeText()
function.
JavaScript
js
/** * Copy text to the clipboard. * * @param text - Text to copy to the clipboard. * @returns void */function copyToClipboard(text) { const { clipboard } = window.navigator; if (typeof clipboard?.writeText !== 'function') { return copyToClipboardFallback(text); } return clipboard.writeText(text);}/** * Fallback method to copy text to the clipboard. * * To be used for browsers that don't support `Clipboard.writeText`. * * @param text - Text to copy to the clipboard. * @returns void */function copyToClipboardFallback(text) { const textArea = document.createElement('textarea'); textArea.value = text; // Prevent scroll to bottom after appendChild textArea.style.position = 'fixed'; textArea.style.top = '0'; textArea.style.left = '-9999px'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const success = document.execCommand('copy'); if (success) { return Promise.resolve(); } else { throw new Error('Failed to copy to the clipboard'); } } catch (err) { return Promise.reject(err); } finally { document.body.removeChild(textArea); }}
TypeScript
ts
/** * Copy text to the clipboard. * * @param text - Text to copy to the clipboard. * @returns void */function copyToClipboard(text: string): Promise<void> { const { clipboard } = window.navigator; if (typeof clipboard?.writeText !== 'function') { return copyToClipboardFallback(text); } return clipboard.writeText(text);}/** * Fallback method to copy text to the clipboard. * * To be used for browsers that don't support `Clipboard.writeText`. * * @param text - Text to copy to the clipboard. * @returns void */function copyToClipboardFallback(text: string): Promise<void> { const textArea = document.createElement('textarea'); textArea.value = text; // Prevent scroll to bottom after appendChild textArea.style.position = 'fixed'; textArea.style.top = '0'; textArea.style.left = '-9999px'; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { const success = document.execCommand('copy'); if (success) { return Promise.resolve(); } else { throw new Error('Failed to copy to the clipboard'); } } catch (err) { return Promise.reject(err); } finally { document.body.removeChild(textArea); }}