How to copy text to the clipboard with JavaScript (5 lines of code)?
Tags: showdev, javascript
Published: 2020-01-27 16:35:26

Originally posted on [my blog](https://www.ibrahima-ndaw.com/blog/how-to-copy-text-to-clipboard-in-javascript/)

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](https://tailwindcss.com/docs/installation) 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).

```html
<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_

![awesome](https://media.giphy.com/media/6IAmwRPF0lMME/source.gif)

## JavaScript

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

```javascript
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_

![easy](https://media.giphy.com/media/zcCGBRQshGdt6/source.gif)

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.
{% codepen https://codepen.io/ibrahima92/pen/qBEvZRa default-tab=js,result %}

| [TWITTER](https://twitter.com/ibrahima92_) | [BLOG](https://www.ibrahima-ndaw.com/) | [NEWSLETTER](https://ibrahima-ndaw.us5.list-manage.com/subscribe?u=8dedf5d07c7326802dd81a866&id=5d7bcd5b75) | [GITHUB](https://github.com/ibrahima92) | [LINKEDIN](https://www.linkedin.com/in/ibrahima-ndaw/) | [CODEPEN](https://codepen.io/ibrahima92) | [DEV](https://dev.to/ibrahima92) |
| -------------- | ------------------------------------------ | ----------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------- | ------------------------------------------------------ | ---------------------------------------- | -------------------------------- |