Copy Text to Clipboard using HTML, CSS & JS

Copy Text to Clipboard using HTML, CSS & JS

Hello developers, today in this blog you'll learn to make a Copy Text to Clipboard using HTML, CSS & JS.

When you copy something, your selection is held on the clipboard, where it remains until you copy something or shunt down your computer. This means that you can paste the same data multiple times and in different applications.

In this blog (Copy Text to Clipboard), on a webpage, there are two text area boxes and one copy button. When you click on that copy button, the upper texts will be selected and copied. When you click on the copy button, a small tooltip is used to inform a user that the text has been copied successfully. And you can paste that copied texts to the text area where there is the text as paste your copied content hare. You can also paste the copied texts into any other application.

The source code of this Copy Text to Clipboard is given below, if you want the source code of this program, you can copy it. You can use this Copy Text to Clipboard code on your projects.

Copy Text to Clipboard [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.

<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Copying Texts in Clipboard || Learningrobo</title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <textarea id="copyText" cols="60" rows="5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam assumenda nihil suscipit obcaecati sit, cum quod corporis adipisci ipsam, fugiat, quae error.</textarea> <br /> <div class="btn"> <button><i class="far fa-copy copyIcon fa-lg"></i> Copy</button><span class="tooltip">copied</span> </div> <textarea cols="60" id="pasteText" placeholder="Paste your copied content here.." rows="5"></textarea> </div> <div class="credit">Made with<span style="color:tomato;"> ❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> <script type="text/javascript" src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To form the page attractive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center; 
  background: -webkit-linear-gradient(to right, #38ef7d, #11998e);  
  background: linear-gradient(to right, #38ef7d, #11998e); 
  height: 100vh;
  width: 100%;
}
::selection {
  color: #fff;
  background: #187bcd;
}
textarea{
  background: #12192c;
  padding: 20px;
  font-size: 17px;
  text-align: justify;
  color: #fff;
  border-radius: 10px;
  border: 4px solid #187bcd;
}
textarea:focus{
  outline-color: #16a085;
  border: 5px solid #16a085;
}
.btn{
  margin: 5px 0 40px 0;
}
.btn button{
  padding: 9px 15px;
  font-size: 17px;
  text-transform: uppercase;
  font-weight: 500;
  background: #187bcd;
  border: none;
  color: #f2f2f2;
  cursor: pointer;
  letter-spacing: 1px;
  border-radius: 5px;
  outline: none;
}
.btn .tooltip{
  position: relative;
  margin-left: -10px;
  font-size: 17px;
  font-weight: 500;
  color: #f2f2f2;
  z-index: 10;
  background: #187bcd;
  padding: 5px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, margin-left 0.4s;
}
.btn .tooltip.show{
  margin-left: 10px;
  opacity: 1;
  pointer-events: auto;
}
.tooltip:before{
  content: '';
  position: absolute;
  height: 15px;
  width: 15px;
  background: #187bcd;
  top: 50%;
  left: -5px;
  z-index: -1;
  transform: translateY(-50%) rotate(45deg);
}
::-webkit-scrollbar{
    width: 5px;
}
::-webkit-scrollbar-track{
    background-color: #f7f7f7;
}
::-webkit-scrollbar-thumb{
    background-color: #8b9dc3;
    cursor: pointer;
}
.credit a{
    text-decoration: none;
    font-weight: 800;
    color: #12192c;
}
.credit {
    text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color: #000;
}
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


const copyText = document.querySelector("#copyText");
         const pasteText = document.querySelector("#pasteText");
         const button = document.querySelector("button");
         const tooltip = document.querySelector(".tooltip");
         button.addEventListener('click', function(){
           copyText.select();
           pasteText.value = "";
           tooltip.classList.add("show");
           setTimeout(function(){
             tooltip.classList.remove("show");
           },700);
           if(document.execCommand("copy")){
             pasteText.focus();
           }else{
             alert("Something went wrong!");
           }
         });
We hope you would like this Copy Text to Clipboard using HTML, CSS & JS.

Thank you for reading our blog. If you face any problem in creating this Copy Text to Clipboard using HTML, CSS & JS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome