Copy Text To Clipboard in HTML CSS and JavaScript
by Letscode - October 4,2023
typeing-text

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.

Copy Text To Clipboard using HTML CSS and JavaScript | Free Source Code

HTML
                        
<!DOCTYPE html>
<!-- Website - letscodeweb -->

<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>
CSS
                        
/* 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: #00749a;
}

.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: #fff;
  margin: 4px;
}

.text-boxes .text-box textarea {
  height: 100%;
  width: 100%;
  padding: 30px;
  font-size: 15px;
  font-weight: 400;
  outline: none;
  border: 1px solid #000;
  border-radius: 8px;
  background: #fff;
}

.text-box textarea::-webkit-scrollbar {
  display: none;
}

.text-boxes .text-box button {
  height: 45px;
  width: 155px;
  color: #fff;
  background: black;
  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: #fff;
  color: #000;
}

@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.

Buy Me A Coffee

Most Popular

Recent Posts

  1. Image Slider in HTML CSS and JavaScript

    Letscode - October 4,2023

  2. Facebook Login Page Using HTML & CSS

    Letscode - October 10,2023

  3. Amazon Website clone in HTML & CSS

    Letscode - November 4,2023

  4. Custom Captcha Generator in HTML CSS and JS

    Letscode - October 24,2023