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.
Hopefully, the live demo above has helped you to know how it works. Above you will find the required source code.
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.
I have designed the webpage with the help of CSS below. Here I have used blue as the background color of the web page.
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.
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.
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%.
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.
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.
➤ 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.
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.