How to Create JavaScript Copy to Clipboard

How to Create JavaScript Copy to Clipboard

How to Create JavaScript Copy to Clipboard

In this article, you will learn how to create Copy to Clipboard using HTML CSS, and JavaScript. JavaScript Copy to Clipboard is a simple project that helps to copy something. This type of structure is often used to copy a lot of content in a box or in a text area.

You can build it with the help of simple HTML CSS JavaScript. If you want to copy manually, you have to copy all those texts. But this project will help you to easily copy all the content with a single click.

JavaScript Copy to Clipboard

I have shared step by step tutorial for your convenience. First I made it more structured with the help of HTML CSS and then I implemented it using a small amount of JavaScript. First I created a box at the top of the web page and added a title to that box.

Then I created a box with the help of Textarea. In that box I have added a lot of text then there is a button. Clicking on that button will copy all the text. I have added some amount of hover in the structure so that after clicking on the button, border color, icon, etc. will change.

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

Hopefully, the live demo above has helped you to know how it works. Above you will find the required source code.

How to Copy to Clipboard in JavaScript

Now I have shown the complete tutorial step by step on how to make this JavaScript Copy to Clipboard. If you are a beginner, be sure to follow the tutorial below.

First, you create the HTML and CSS files. Here I have used the font awesome CDN link which will make the icon work. You must include that link in your HTML file. Below I have shown the code step by step. If you have difficulty connecting those codes together, you can use the download button below the article.

Step 1: Basic structure of the project

I have basically designed this copy to clipboard HTML using the following HTML and CSS codes.

<div class=”text-box”>
 
</div>

I have designed the webpage with the help of CSS below. Here I have used blue as the background color of the web page.

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: “Poppins”, sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0486c2;
}

I use these codes in a box that will basically serve as the basic structure of this project. Its width is 750px and the background color is white.

.text-box{
  position: relative;
  background: #fff;
  width: 650px;
  margin: 10px;
  padding: 0 20px 20px 20px;
  border-radius: 10px;
  box-shadow: 0 5px 20px rgb(1 1 1 / 10%);
}
Basic structure of the project

Step 2: Add the title to the box

The following code has helped to add a title. This title will only help to enhance the beauty. I used the h2 tag to create the title. I have also used font-size: 1.5em to increase the text size a bit.

  <div class=”top-area”>
    <h2>Copy To Clipboard</h2>
  </div>
.text-box .top-area{
  justify-content: space-between;
  align-items: center;
  margin: 20px 0;
}
.text-box .top-area h2{
  font-size: 1.5em;
  font-weight: 700;
  text-align: center;
}
Add the title to the box

Step 3: Create a text box using Textarea 

Now I have added some amount of text using Textarea. All the information contained in this Textarea will be copied when you click on the copy button. The minimum height of this box is 300 px and the width is 100%.

<textarea readonly spellcheck=”false”>Lorem ipsum dolor……laborum.</textarea>
.text-box textarea{
  width: 100%;
  min-height: 300px;
  font-size: 1em;
  padding: 10px;
  outline: none;
  resize: none;
  border-radius: 5px;
  border: 1px solid #009FEF;
}
Create a text box using Textarea

Step 4: Create a copy button

I have created a button using some amount of code below. This button will help you to copy the text. I have added text and an icon to the button.

I mentioned earlier that you need to use the font awesome CDN link to make this icon work. I used the button width 112px and height 42px.

<div class=”copy-btn”><i class=”fas fa-copy”></i> Copy</div>
.copy-btn{
  background: #eee;
  color: #999;
  font-size: 1.2em;
  width: 112px;
  height: 42px;
  margin-left: 44%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
}
.copy-btn:hover{
  color: #222;
}
.copy-btn i{
   margin-right: 5px;
}
Create a copy button

Step 5: Activate JavaScript Copy to Clipboard

Above we have created the basic design of this project (javascript Textarea copy to clipboard) using HTML and CSS. Now it’s time to implement it using JavaScript, which means that when you click on the copy button, the contents of the text area will be copied.

The following 2 lines define the id of the copy button and the constant of the Textarea using JavaScript.

    const copyBtn = document.querySelector(“.copy-btn”);
    const textarea = document.querySelector(“textarea”);

I have given all the JavaScript codes together below but for your convenience, these codes are explained below.

    copyBtn.addEventListener(“click”, () => {
      textarea.select();
      document.execCommand(“copy”);
      copyBtn.innerHTML = “<i class=’fas fa-check’></i>”;
      copyBtn.style.background = “#2DCDA7”;
      copyBtn.style.color = “#fff”;
    });

JavaScript Explanation

First I took the help of the following code to select the text. For this, I have taken the help of click, select, so whenever you click on the button, the text will be selected.

copyBtn.addEventListener(“click”, () => {
  textarea.select();
});

The following JavaScript line will help you to copy those selected texts. For this, I have taken the help of execCommand which will help to copy some selected things.

document.execCommand(“copy”);

With the help of JavaScript, I have made some changes to the button below. 

  ➤ Using the first line I changed the icon inside the button. Instead of the icon that is normally seen, other icons can be found.

  ➤ I changed the background color using the second line code.

  ➤ I changed the color of the icon using the third line code.

 copyBtn.innerHTML = “<i class=’fas fa-check’></i>”;
 copyBtn.style.background = “#2DCDA7”;
 copyBtn.style.color = “#fff”;
JavaScript Copy to Clipboard

Copy to Clipboard JS (Code)

Above I have shared this Copy to input tutorial. However, many beginners may have difficulty connecting all the codes together. For this, I have combined all the codes together. 

You create an HTML file then use the codes below. You do not need to add any code separately for this.

See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.

Hopefully, you have been able to create a JavaScript Copy to Clipboard design using the above codes. If you have any problem then you can download the source code file below.

I hope you have learned from this tutorial how I created this simple JavaScript Copy to Clipboard. If you have any difficulty in making this design, you can definitely let me know by commenting.