Copy Text To Clipboard in HTML CSS and JavaScript

9
How To Copy Text To Clipboard using HTML CSS and JavaScript

Q: How To Copy Text To Clipboard using HTML CSS and JavaScript?

A: After watching and reading the following video tutorial you will definitely know, how to copy text using HTML CSS & Javascript.

Hello friends, today we will be going to learn how do we copy text to a clipboard using JavaScript. I have posted many videos and articles before related to the Javascript project, now this the something new that we are going to build.

What do you mean by Copy Text To Clipboard?

The process of copying text, images, or other elements to our computer clipboard for paste in other places is known as copying text to clipboard. The copying method is the best and easy way to duplicating something for other purposes.

As you can see on the given image of our today project. We can see some HTML codes are inside the box and one button underneath this box. Basically, when we click on that copy-coded button, all text inside the box will be copied to our clipboard and we can paste it anywhere we want. We don’t need to select text and copy them manually, it can be done with just one click.

Some questions and answers people asked on this topic.

Q: How do I copy text to the clipboard?

A: Normally, just select text, images or other elements with the mouse left button, and press CTR + C then selected items will be copied in the clipboard, now you can paste anywhere as you want.

Q: How do I copy text from div to clipboard on the button click?

A: Execute the div where text is in inside by making onclick() function on the button then in inside of that function, write div.select(); by doing this you text inside that div will select only, now to copy those selected texts, just type document.execCommand(“copy”); then your text will be copied on your clipboard.

To see the real example of this programming, do watch the full video tutorial of copy text to clipboard using javascript, after watching the given video you will get an idea, how all code is working.

Copy Text To Clipboard using HTML CSS and JavaScript | Video Tutorial

 

 

As you have seen on the given video tutorial of  Copy Text To Clipboard using HTML CSS and JavaScript, at first in the video we can see some boxes and different codes in the particular boxes, when I clicked on the button of a specific box its text is coped in my clipboard and I can paste it’s on the notepad.

If you are feeling bored watching the given video tutorial of how to copy text to clipboard using HTML CSS & JavaScipt then you can copy or download the given codes below:

You May Like This:

<!DOCTYPE html>
<!-- Website - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Copy Code To Clipboard | CodingLab</title>
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <div class="text-boxes">
      <div class="text-box HTMLBox">
        <div class="topic">HTML Code:</div>
        <textarea id="HTMLBox" readonly>
        Add HTML Code Here
      </textarea
        >
        <button id="HTMLButton">Copy Codes</button>
      </div>
      <div class="text-box CSSBox">
        <div class="topic">CSS Code:</div>
        <textarea id="CSSBox" readonly>
        Add CSS codes Here
      </textarea
        >
        <button id="CSSButton">Copy Codes</button>
      </div>
      <div class="text-box JSBox">
        <div class="topic">JavaScript Code:</div>
        <textarea id="JSBox" readonly>
        Add JavaScript Code here
      </textarea
        >
        <button id="JSButton">Copy Codes</button>
      </div>
    </div>

    <script>
      // HTML BOx JS Code
      let HTMLBox = document.getElementById("HTMLBox");
      let HTMLButton = document.getElementById("HTMLButton");

      HTMLButton.onclick = function () {
        HTMLBox.select();
        document.execCommand("copy");
        HTMLButton.innerText = "Codes Copied";
      };

      // CSS Box Js Code
      let CSSBox = document.getElementById("CSSBox");
      let CSSButton = document.getElementById("CSSButton");

      CSSButton.onclick = function () {
        CSSBox.select();
        document.execCommand("copy");
        CSSButton.innerText = "Codes Copied";
      };
      // JavaScript BOx JS Code
      let JSBox = document.getElementById("JSBox");
      let JSButton = document.getElementById("JSButton");

      JSButton.onclick = function () {
        JSBox.select();
        document.execCommand("copy");
        JSButton.innerText = "Codes Copied";
      };
    </script>
  </body>
</html>

/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #fdfcfc;
}
.text-boxes{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 60px;
}
.text-boxes .text-box{
  height: 380px;
  max-width: 660px;
  width: 100%;
  margin: 55px 0;
}
.text-boxes .text-box .topic{
  font-size: 18px;
  font-weight: 600;
  color: #265df2;
  margin: 4px;
}
.text-boxes .text-box textarea{
  height: 100%;
  width: 100%;
  padding: 30px;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  border: 1px solid #265df2;
  border-radius: 8px;
  background: #e7edfe;
}
.text-box textarea::-webkit-scrollbar{
  display: none;
}
.text-boxes .text-box button{
  height: 45px;
  width: 155px;
  color: #fff;
  background: #265df2;
  outline: none;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
  margin: 8px 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
.text-boxes .text-box button:hover{
  background: #0e4bf1;
}
@media (max-width: 400px) {
  .text-boxes .text-box button{
    width: 100%;
  }
}

















































/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  width: 100%;
  background: #fdfcfc;
}
.text-boxes{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 30px;
  margin-bottom: 60px;
}
.text-boxes .text-box{
  height: 380px;
  max-width: 660px;
  width: 100%;
  margin: 55px 0;
}
.text-boxes .text-box .topic{
  font-size: 18px;
  font-weight: 600;
  color: #265df2;
  margin: 4px;
}
.text-boxes .text-box textarea{
  height: 100%;
  width: 100%;
  padding: 30px;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  border: 1px solid #265df2;
  border-radius: 8px;
  background: #e7edfe;
}
.text-box textarea::-webkit-scrollbar{
  display: none;
}
.text-boxes .text-box button{
  height: 45px;
  width: 155px;
  color: #fff;
  background: #265df2;
  outline: none;
  border: none;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 400;
  margin: 8px 0;
  cursor: pointer;
  transition: all 0.4s ease;
}
.text-boxes .text-box button:hover{
  background: #0e4bf1;
}
@media (max-width: 400px) {
  .text-boxes .text-box button{
    width: 100%;
  }
}

If you face any difficulties while creating your Copy Code To Clipboard or your code is not working as expected, you can download the source code files for this Copy Text To Clipboard for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Previous articleResponsive Footer using HTML And CSS | Free Source Code
Next articleCreate Custom Music Player in JavaScript

RELATED ARTICLESMORE FROM AUTHOR

9 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here