3
Copy text to clipboard in JS(two ways)
source link: https://dev.to/0shuvo0/copy-text-to-clipboard-in-jstwo-ways-1pn1
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Of course the user can just select the text and copy it but giving them a button that they can click to copy it seems like a better idea(better UX). So in this article I will show you how you can copy text to clipboard using JavaScript.
1. Old method
the old way to copy text to clipboard is
- create a textarea(Or input)
- put the text you want to copy in that textarea
- add textarea to your page
- select the text in textarea
- execute copy command
- remove it from your page
function copyToClipboard(text){
const textArea = document.createElement("textarea")
textArea.value = text
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
document.execCommand('copy')
document.body.removeChild(textArea)
}
Enter fullscreen modeExit fullscreen mode
2. New method
For newer browsers we can simply use the navigator.clipboard to copy text
function copyToClipboard(text){
navigator.clipboard.writeText(text)
}
Enter fullscreen modeExit fullscreen mode
3. Bonus
Now we can combine these two approach and create a function that would use the navigator.clipboard in modern browsers and fall back to old approach when needed
function copyToClipboard(text){
if(navigator.clipboard){
navigator.clipboard.writeText(text)
return //codes below wont be executed
}
const textArea = document.createElement("textarea")
textArea.value = text
document.body.appendChild(textArea)
textArea.focus()
textArea.select()
document.execCommand('copy')
document.body.removeChild(textArea)
}
Enter fullscreen modeExit fullscreen mode
Make sure you check out my other articles and YouTube channel.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK