Simple Copy to Clipboard using JavaScript & CSS

This tutorial will help you to know how to create Copy to Clipboard using JavaScript. Earlier I shared many more types of JavaScript Copy to Clipboard tutorials.

However, this design is relatively simple. If you are a beginner then this tutorial will help you a lot.

Copy to Clipboard JavaScript is a simple project that helps to copy the information contained in an input box or text area.

✅✅ Live Preview 👉👉 Copy to Clipboard JavaScript

This means you can use this type of project if you need to copy some of the text in a box. This Copy to Clipboard design can copy all the tests in that box with a single click.

JavaScript Copy to Clipboard

The projects I shared earlier were relatively difficult. In which a lot of JavaScript or JQuery was used. However, in this Copy to Clipboard I have used only two lines of JavaScript.

As a result, if you do not know much about JavaScript, you can understand how to make copy to clipboard html. First I created a box on the webpage.

In which we have created an input box using textarea. Here you can use the input function instead of the text area. Then there is a button that you can click to copy the information in the text.

Copy to Clipboard html code

I used HTML CSS and JavaScript to build it. I have added the basic information of this Copy to Clipboard project using the following HTML.

First I created an area. Then we created an input space using texturia. Has then created a button that has been used to create HTML's button function.

<div class="container">
   <textarea type="text" id="text">hi</textarea>

   <button onclick="copy('text')">Copy Text</button>
</div>

Design it with css code

Above we have added basic information using HTML. Now is the time to design this project using CSS. Very little CSS has been used here.

First the webpage was designed and I used the blue color of the web page background. Then I designed the box. The background of the box is white and the width of the box is 350px is used.

Here a border of 2 px is used around the textaria and the minimum height is 150px. I have designed the button at the end of it all. Button's background is blue and test color is white.

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: "Poppins", sans-serif;
}

body {
 background: rgb(6, 118, 185);
 text-align: center;
 align-items: center;
 justify-content: center;
}

.container {
 width: 350px;
 background: white;
 margin: 100px auto;
 padding: 15px;
 border-radius: 4px;
}

.container textarea {
 width: 100%;
 min-height: 150px;
 border: 2px solid rgb(11, 127, 205);
 padding: 4px;
 font-size: 16px;
}

.container button {
 padding: 11px 22px;
 background: rgb(17, 106, 198);
 color: white;
 border: none;
 border-radius: 3px;
 font-size: 17px;
 margin-top: 8px;
}

Activate Copy to Clipboard with JavaScript

I have done the basic design work of this JavaScript Copy to Clipboard. Now it's time to activate this copy box with JavaScript.

I have used only two lines of js code here. Below I have provided the required information for each line.

//Pass the id of the <input> element to be copied as a parameter to the copy()
let copy = (textId) => {
  //Selects the text in the <input> elemet
  document.getElementById(textId).select();
  //Copies the selected text to clipboard
  document.execCommand("copy");
};

Hopefully you have been able to create this Simple Copy to Clipboard project using the tutorial and source code above.

Earlier I shared many more tutorials on JavaScript Copy to Clipboard. Use the comment box below if you have any questions.

✅✅ Download Source Code 👉👉 JavaScript Copy to Clipboard