Copy Text To Clipboard using JavaScript

Hello readers, today in this blog we're going to create a Copy Text to clipboard program using HTML CSS and JavaScript. I have made a lot of JavaScript Projects and as usual, we make something useful and interesting.

In this project CopyText to clipboard I'm going to be showing you how to create such amazing project so you can easily build this on your own. First in the image preview above you can see I've a card containing some text in an textarea box. Firstly before we begin let me explain to you how this program works, and how it can be used in a website.

A Copy Text to clipboard is a program that executes a command copying the text on the textarea or on the input field. CopyText to clipboard can be used in some cases you have too many codes and user can't start coding everything because of no time you need a Copy Text to clipboard program allowing the user to easily CopyText and paste in their code editor. Now that I have explained how this works and how it can be user let's jump in to creating this program.

If you want to see the real demo of this Copy Text to Clipboard then you have to watch the video tutorial that I have given below, and one thing, after watching the following video tutorial you will get all the ideas of the code that I have used to create this program.

CopyText To Clipboard using HTML CSS & JavaScript | Video Tutorial

In the video, you have seen a demo of this program CopyText to clipboard and how I built this project using HTML CSS & JavaScript, I've used some codes in JavaScript called execCommand("copy") - This stands for executeCommand - this executes a command which I've given it to copy this means it will copy the text in the given box which you'll have to create, it doesn't mean you'll have to make that box a textarea box you can use input field if you want in some case a Popup Share Modal or a Newsletter.

I believe, now you can make this CopyText to Clipboard easily. For those friends who are feeling difficulty creating this program CopyText to clipboard don't worry, I have given all the source code of this program (CopyText To Clipboard in HTML CSS and JavaScript).

You May Like This:

Before getting the given code of CopyText To Clipboard, you need to create two files: an HTML file and a CSS file. After Creating these two files then you can copy-paste the following codes in your documents. You can also directly download all source code files from the given download button.

CopyText To Clipboard using HTML CSS & JavaScript [Source Code]

HTML CODE:

<!DOCTYPE html>
<!-- Coding By Code Block youtube.com/c/CodeBlockYT -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>CopyText To Clipboard using HTML CSS & JS</title>
  <!-- Font-Awesome CDN Link -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="contain">
      <div class="text">Copy Text To Clipboard</div>
      <div class="icon">
        <i class="show copy fas fa-copy"></i>
        <i class="hide copy far fa-copy"></i>
      </div>
      <div class="box">
        <!-- Add a textarea code -->
        <!-- here add your text to copy -->
      </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS CODE:

/* Google Fonts Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
::selection{
  background: #f2f2f2;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(136deg, #8e44ad, #2980b9);
}
.contain{
  max-width: 400px;
  width: 100%;
  background: #fff;
  padding: 20px;
  box-shadow: 0 5px 4px rgba(0,0,0,0.2);
  border-radius: 5px;
}
.contain .text{
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  background: linear-gradient(136deg, #8e44ad, #2980b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contain .icon{
  text-align: right;
}
.contain .icon i{
  font-size: 28px;
  cursor: pointer;
  background: linear-gradient(136deg, #8e44ad, #2980b9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.contain .box textarea{
  max-width: 370px;
  width: 100%;
  margin-top: 18px;
  height: 90px;
  padding: 10px 10px;
  resize: vertical;
  max-height: 400px;
  border: 2px solid #bfbfbf;
  outline: none;
  border-radius: 5px;
  min-height: 90px;
}
.contain .box textarea:focus{
  border-color: #8e44ad;
}
.contain .box textarea::-webkit-scrollbar{
  width: 20px;
  height: 20px;
}
.contain .icon i.show{
  display: none;
}
.contain .icon i.hide{
  display: block;
}
.contain .box textarea.copy{
  border-color: #8e44ad;
}
.contain .icon i.show.active{
  display: block;
}
.contain .icon i.hide.active{
  display: none;
}

JavaScript CODE:

const box = document.querySelector(".box textarea");
const copybtn = document.querySelector(".icon .show");
const copybtns = document.querySelector(".icon .hide");

copybtn.onclick = (e)=>{
  box.select();
  document.execCommand("copy");
  box.classList.add("copy");
  copybtn.classList.add("active");
  copybtns.classList.add("active");
  console.log("Copied");

  setTimeout(()=>{
    window.getSelection().removeAllRanges();
    box.classList.remove("copy");
    copybtn.classList.remove("active");
    copybtns.classList.remove("active");
    console.clear("Copied");
  }, 3000);
}

copybtns.onclick = (e)=>{
  box.select();
  document.execCommand("copy");
  box.classList.add("copy");
  copybtn.classList.add("active");
  copybtns.classList.add("active");
  console.log("Copied");

  setTimeout(()=>{
    window.getSelection().removeAllRanges();
    box.classList.remove("copy");
    copybtn.classList.remove("active");
    copybtns.classList.remove("active");
    console.clear("Copied");
  }, 3000);
}

Copy Text To Clipboard using JavaScript

CopyText To Clipboard using HTML CSS & JavaScript | Video Tutorial

CopyText To Clipboard using HTML CSS & JavaScript [Source Code]

Creative Tutorials

Post a Comment

Post a Comment

Contact Form