DEV Community

How to copy text to the clipboard with JavaScript (5 lines of code)?

Ibrahima Ndaw on January 27, 2020

Originally posted on my blog As a developer, we know how useful and good it is to have a "copy" button sitting next to a code block. In some cases...

Read full post

Assis Ferreira • Jan 27 '20

I made a simple library to facilitate that work, you can check and contribute in github.com/assisfery/CopyPasteJS

Ibrahima Ndaw • Jan 28 '20

cool. looking forward to giving it a try

Andreas • Jan 28 '20

Just curious: What exactly are the 5 lines of code?

Ibrahima Ndaw • Jan 28 '20 • Edited

1 const copyText = document.querySelector("#copyMe")
2 const copyMeOnClipboard = () => {
3 copyText.select()
4 copyText.setSelectionRange(0, 99999) // used for mobile phone
5 document.execCommand("copy") }

That's the code that does the copy.

samydoesit • Jan 28 '20 • Edited

You could also use the browser Clipboard API - "navigator.clipboard"

const str = 'String to copy'

function copyToClipboard (str) {
    navigator.clipboard.writeText(str)
}

Ibrahima Ndaw • Jan 28 '20

Yeah it's a great one. But it's still not supported by all browsers.

octopoulos • Jun 3 '20

That's the only one to use to be honest, and according to caniuse, all browsers support it except Opera Mini and UC Browser for Android.

Waylon Walker • Jan 27 '20

Had no idea it was that easy 🤯. Love the addition of the code pen.

Ibrahima Ndaw • Jan 28 '20

I'm glad you find value on it.

YD • Jan 27 '20

Cool)

Ibrahima Ndaw • Jan 27 '20

👍

Lorenzo Jiménez • Jan 27 '20 • Edited

First, be sure that you review browser compatibility that you are supporting.
Also, one thing is getting data from the clipboard and putting it on it, that is very different to implement.

Ibrahima Ndaw • Jan 28 '20

According to Can I Use 93.39% of browsers support this method.

And to paste something on the input field just do this document.execCommand("paste")

Madza • Jan 27 '20 • Edited

Also there is a handy, lightweight library for this

Ibrahima Ndaw • Jan 28 '20

Thanks for sharing the resource