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

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, it helps a lot in increasing the usability of our website.

In this post, we are going to make the text copiable to the clipboard with just a few lines of JavaScript.

The markup

To make this post quick and easy to digest, I will use Tailwind CSS to style the app and make everything look nice.

So, for the HTML part, it will be very simple (except the bunch of classes added by Tailwind CSS).

<main class="flex flex-col h-screen justify-center items-center bg-gray-100">
  <div class="bg-white max-w-sm p-5 rounded shadow-md mb-3">
    <input
      class="border-blue-500 border-solid border rounded py-2 px-4"
      type="text"
      placeholder="Enter some text"
      id="copyMe"
    />
    <button
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 border border-blue-700 rounded"
      onclick="copyMeOnClipboard()"
    >
      Copy
    </button>
  </div>
  <p class="text-green-700"></p>
</main>

Here, there are 3 important things to retain:

• The id of the input tag copyMe
• The function copyMeOnClipboard() of the button tag
• The p tag

The id copyMe will help us to access to the value entered by the user. And when he clicks on the Copy button, it will trigger the copyMeOnClipboard() method which will handle the copy and show a success message dynamically with JavaScript.

With that being said, we can now move on to the JS file and do the final touch.

JavaScript is awesome

JavaScript

Of course, JavaScript is cool. And its document object has some very handy methods.

const copyText = document.querySelector("#copyMe")
const showText = document.querySelector("p")

const copyMeOnClipboard = () => {
  copyText.select()
  copyText.setSelectionRange(0, 99999) // used for mobile phone
  document.execCommand("copy")
  showText.innerHTML = `${copyText.value} is copied`
  setTimeout(() => {
    showText.innerHTML = ""
  }, 1000)
}

As you can see here, we start by selecting our needed elements copyText and showText. It's respectively the input and the paragraph tags. Then, we use the copyMeOnClipboard() function to handle the logic.

The copyText element (remember it's the input tag) gives us access to the select() method and as you might guess it selects the content of the input text field.

And finally, we execute the copy command with document.execCommand("copy") and get the text on the clipboard.

It's too easy

We've now done, but we can still improve it a little bit by showing to the user a success message. It's quite easy because we already have the showText element. The only thing we have to do is append the success message with innerHTML and remove it after 1 second with setTimeout().

And That's all folks!

Thanks for reading it.

TWITTER	BLOG	NEWSLETTER	GITHUB	LINKEDIN	CODEPEN	DEV

Comments

[Assis Ferreira]

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

[Ibrahima Ndaw]

cool. looking forward to giving it a try

[Andreas]

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

[Ibrahima Ndaw]

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]

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

const str = 'String to copy'

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

[Ibrahima Ndaw]

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

[octopoulos]

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]

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

[Ibrahima Ndaw]

I'm glad you find value on it.

[YD]

Cool)

[Ibrahima Ndaw]

👍

[Lorenzo Jiménez]

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]

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]

Also there is a handy, lightweight library for this

[Ibrahima Ndaw]

Thanks for sharing the resource