An Interest In:
Web News this Week
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
October 22, 2021 03:40 pm GMT
Original Link: https://dev.to/0shuvo0/copy-text-to-clipboard-in-jstwo-ways-1pn1
Copy text to clipboard in JS(two ways)
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)}
2. New method
For newer browsers we can simply use the navigator.clipboard
to copy text
function copyToClipboard(text){ navigator.clipboard.writeText(text)}
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)}
Make sure you check out my other articles and YouTube channel.
Lets create a screen recorder with JS
Shuvo Oct 21 3 min read
#javascript #webdev #tutorial #beginners
Original Link: https://dev.to/0shuvo0/copy-text-to-clipboard-in-jstwo-ways-1pn1
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To