I have a button
When I clicked on COPY
copyImageLinkText({ mouseenter, mouseleave }, e) {
this.showCopiedText = !this.showCopiedText
navigator.clipboard.writeText(this.imageLink)
clearTimeout(this._timerId)
mouseenter(e)
this._timerId = setTimeout(() => mouseleave(e), 1000)
},
This line seems to work perfectly locally on my MacBook Pro
navigator.clipboard.writeText(this.imageLink)
It's not working when I build and deployed it to my dev server.
TypeError: Cannot read properties of undefined (reading 'writeText')
The use of navigator.clipboard
requires a secure origin. So if your dev environment is being served over HTTP, then the clipboard method won't be available.
According to MDN Clipboard
docs
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Maybe you could check if this method is available with window.isSecureContext
, and disable the Copy Text button accordingly.
The best option is to use HTTPS in your dev environment.
But since you asked for a workaround, here's a (very hacky) working method. Using Document.exec
command, which is no longer recommended, in favour of ClipboardAPI
.
function unsecuredCopyToClipboard(text) {
const textArea = document.createElement("textarea");
textArea.value = text;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
} catch (err) {
console.error('Unable to copy to clipboard', err);
}
document.body.removeChild(textArea);
}
You can then just check if !navigator.clipboard
and call the fallback method, otherwise continue with the normal navigator.clipboard.writeText(...)
function. For example:
const unsecuredCopyToClipboard = (text) => { const textArea = document.createElement("textarea"); textArea.value=text; document.body.appendChild(textArea); textArea.focus();textArea.select(); try{document.execCommand('copy')}catch(err){console.error('Unable to copy to clipboard',err)}document.body.removeChild(textArea)};
/**
* Copies the text passed as param to the system clipboard
* Check if using HTTPS and navigator.clipboard is available
* Then uses standard clipboard API, otherwise uses fallback
*/
const copyToClipboard = (content) => {
if (window.isSecureContext && navigator.clipboard) {
navigator.clipboard.writeText(content);
} else {
unsecuredCopyToClipboard(content);
}
};
<button onClick="buttonPress()">➡️ Copy Message to Clipboard</button>
<script type="text/javascript"> const buttonPress = () => { copyToClipboard('Hello World!'); console.log('Clipboard updated 📥\nNow try pasting!'); }; </script>