4

Copy text to clipboard in JS(two ways)

 3 years ago
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.
neoserver,ios ssh client

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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK