DEV Community

Cover image for 💡 Easy Copy to Clipboard Button in Vanilla JavaScript
Max Programming
Max Programming

Posted on • Updated on • Originally published at blog.usmans.me

💡 Easy Copy to Clipboard Button in Vanilla JavaScript

#javascript #webdev #html #css

👋 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 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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;  
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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')
Enter fullscreen mode Exit fullscreen mode

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 
}
Enter fullscreen mode Exit fullscreen mode

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!!!

Top comments (2)

Collapse
 
aminnairi profile image
Amin •

Hi there and thanks for your article. Copy to clipboard is a small, but powerful feature to have in a website in my opinion!

Unfortunately, it seems like this execCommand method from the global document object has been deprecated as per this doucmentation page on MDN.

You can use the new Clipboard API on newer browser which not only allow you to copy to the clipboard but also paste from it, and fallback to the old execCommand method in some old browser that does not yet support this new API.

Collapse
 
maxprogramming profile image
Max Programming •

Thanks for the suggestion Amin. I haven't used the Clipboard API yet. I think it is very powerful. I will write another updated version of this article by using the Clipboard API.

Actually this was the easiest way I could find to copy the text so I wrote a tiny article about it to share my knowledge. Thanks again, I will check out the Clipboard API

Read next

shadiajam profile image

Should We Rethink About IDs? A Deep Dive into "Snowflake IDs"

Shadi AJAM -

leemeganj profile image

Advanced Next.js caching strategies

Megan Lee -

nobody-99 profile image

-? What is YARN ?-

nobody-99 -

jagroop2001 profile image

20 Important JavaScript Concepts for Your Next Interview 🚀

Jagroop Singh -