💡 Easy Copy to Clipboard Button in Vanilla JavaScript

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

👋 Welcome back developers.

So, in this article we will see how we can create a simple Copy to Clipboard functionality in JavaScript.

Note: This will only work if you want to copy text inside of an input or textarea. It can't be done with any other element.

This is how it's gonna work 👇

It is just a few lines of code and we will be done with it! Let's start with the HTML!

ğŸŽ¨ HTML

The markup for this is very simple. We'll have an input and a button with some id and that's it. We'll also use an icon font called Phosphor icons. So just include it and use the HTML as shown below

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Copy to clipboard</title>
</head>
<body>
  <input type="text" id="copyText" value="cooopy">
  <button id="copyBtn"><i class="ph-copy"></i> Copy</button>
  <script src="https://unpkg.com/phosphor-icons"></script>
</body>
</html>

This will be the result 👇

image.png

💄 CSS

Now we will do the CSS. It will not be too much, but I will be explaining what we do for each element.

First off, we'll use the Universal Selector (*). And put some resets in it. We are putting the font size as 1.5rem as there is no other element except for the input and the button.

* {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    box-sizing: border-box;
}

Next up, we'll center everything on our page using Flexbox on our body and height as 100vh.

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

Result after centering everything 👇 image.png

Now, we will style our button and input, first off, I wrote the common styles by selecting both of them together. These properties are pretty self-explanatory.

button, input {
    padding: 20px;
    border-radius: 20px;
    outline: none;
}

Then we give the input some color on the border and a nice and simple effect on focus. We set the cursor as default so that some people might not get caught that this is an input.

input {
    cursor: default;
    border: 5px solid #2196F3;    
    transition: all 0.3s ease-in-out;
}

input:focus {
    border-color: #0078D7;    
}

And finally, we style our button as shown below. We give it a nice background color and a hover effect changing the background.

button {
    cursor: pointer;
    color: #fff;
    background: #0078D7;
    border: none;
    margin-left: 10px;
    transition: all 0.3s ease-in-out;
}
button:hover {
    background: #2196F3;
}

End result:

image.png

Now let's jump to the most easiest, JS part!

💡 JavaScript

The JavaScript will be pretty straightforward. When the button is clicked, we will trigger a function where we will first select the input and then we will execute the copy command. Let's see how.

First, we select both of the button and input by their IDs

const copyBtn = document.getElementById('copyBtn')
const copyText = document.getElementById('copyText')

And then we check if the button is clicked using onclick in JS. You can also use addEventListener or onclick in HTML if you wish. But I think this is the easy way.

When the button is clicked, we select the text and then copy it.

copyBtn.onclick = () => {
    copyText.select();    // Selects the text inside the input
    document.execCommand('copy');    // Simply copies the selected text to clipboard 
}

So with the select() method, we basically select the text that is inside the input or textarea. And with execCommand, we execute the copy command, which in the end copies whatever text we have selected.

ğŸŽ‰ And we are done with it. DONE

Warning: the execCommand() method still works but it is non standard and I will write an updated blog post covering the Clipboard API .

Let me know in the comments how was your experience throughout this blog post and share your projects where you used this super easy method of copying something in JavaScript.

💙 Give it a like if you liked reading it. Thanks for reading!!!

Hassan Aoutof's photo

good post but I must suggest you mention that the

document.execCommand('copy');

is not a good solution, knowing that it might be removed at any time from any browser, See Docs and you can advise people to use a more stable and safe method as the Clipboard API still the best solution for me is to use them both, I can use the Clipboard API and the .execCommand() as a fallback

Usman Sabuwala's photo

Thanks for the suggestion. I haven't used the Clipboard API yet but I am looking into it and I will write an updated version of this blog post using the Clipboard API. I chose execCommand as I think this is the easiest way possible to achieve the goal

Hassan Aoutof's photo

Usman Sabuwala you are right, it's the easiest way to do it.

Varun Sridharan's photo

Great Post. I was looking for it. :-)

Usman Sabuwala's photo

Thank you so much! I am glad it helped.