Quick Introduction

Today we are going to create a copy to clipboard button with javascript within a few lines of code.

It is easy to create copy to clipboard button and you don’t need a whole bunch of javascript libraries for achieving this functionality.

Also Check Out Post on: Local File Upload And Image Preview 

So Here’s What We are Creating:

Code Explanation:

Basic HTML

<div class="container">
      <!-- Target -->
      <input
        id="text_input"
        class="text_input"
        type="text"
        placeholder="Type Here🔥..."
      />

      <!-- Trigger -->
      <button class="btn" id="btn">
        <img src="./clipboard-outline.svg" />
      </button>
    </div>
    <!-- Input Field For Test -->
    <div class="paste">
      <input type="text" placeholder="Paste Copied Text Here🔥...." />
    </div>

This is a basic HTML code that creates two input fields – One for Copy and the other one for pasting. container class is used to center everything in the center and make the project responsive.

btn class is used to create a button that will trigger copy function which we will create later in this post.

Basic Styling:

/* General Styling */
body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-color: rgb(20, 19, 19);
  color: white;
  font-family: "Montserrat", sans-serif;
  overflow: hidden;
  height: 90vh;
}
/* container */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 5%;
}

/* Font Styling */
.cursive {
  font-style: oblique;
}
h1 {
  color: whitesmoke;
  text-align: center;
  margin-top: 10%;
}
strike {
  color: royalblue;
}
.text_input {
  text-align: center;
}
/* Input Text Styling */
input {
  height: 50px;
  width: 300px;
  border: none;
}

input:focus {
  border: 1px solid royalblue;
}
/* button styling */
.btn {
  background-color: royalblue;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 1px 7px;
  height: 50px;
  width: 70px;
}
.btn:hover {
  opacity: 0.8;
}

button img {
  height: 20px;
  width: 20px;
}

/* Paste Input text */
.paste {
  text-align: center;
  margin-top: 5%;
}
.paste input {
  height: 200px;
  border-radius: 10px;
  text-align: center;
}

The above code is just basic styling to make this project look good and responsive for mobile.

Javascript Logic

Grabbing Elements

const input = document.getElementById("text_input");
const btn = document.getElementById("btn");

The above code is just grabbing the element and storing in variable for latter use.

Adding Event listener

btn.addEventListener("click", copyText);

This block of code adds click eventlistener named “copyText” which we will create now. This copyText function is the main function that does the work of copying text from the input box.

CopyText Function

// CopyText Function
function copyText() {
  input.select();
  document.execCommand("copy");
  btn.innerHTML = "Copied!";
}

select()  the method selects all the text in a <textarea> element or in an <input> element that includes a text field.

document.execCommand("copy") The method interacts with the clipboard and copies the text inside <textarea> or <input>.

You can also use – document.execCommand("cut") or document.execCommand("paste") for cut and paste option.

btn.innerHTML = "Copied!"; And then after the execution of function we set the text to “copied!”