How to create the “Copy to Clipboard” button in JavaScript

JavaScript is a web programming language that makes our website interactive by giving it the ability to think and act. Copy to Clipboard button is a necessity in many websites for example if you have developed a website that paraphrases your sentences, or your website is a plagiarism remover, or it is a simple text field that lets the user write data online. To improve user experience, websites that provide some information and that information is required in other sections of the website, the website requires the copy to clipboard button. So, looking at all these uses, let us implement a JavaScript program that will answer the question of how to create the copy to clipboard button in JavaScript.


HTML is a markup hypertext language that gives structure to our website. We will use HTML to create an input field that will be used by the user to enter some text. Then a button will be created, which when clicked will copy anything that is in the input field. In the end, we will use a script tag to reference the JavaScript file which has JavaScript code:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment Box</title>
    <input type="text" id="mytext">
    <button onclick="handleClick()">Copy</button>
    <script src="code.js"></script>

We used the id attribute in the input tag so we can reference it later from the JavaScript File. We also initialized the onclick event which means whenever the user clicks on the copy button, the handleClick() function will run.


We initialized a function with the name of handleClick() so that whenever the user clicks on the copy button the code in this function will start executing. Inside the function, using the id attribute of the input field, we referenced the input field and attached .value in the end so that the input field value is stored in the variable input. Now that we have the value of the input field, let us copy the value to the clipboard using the navigator.clipboard.write() function where we pass the input variable as a parameter. The input variable text is now copied to the clipboard. In the end, we alert the input variable.

function handleClick() {
    /* Save value of myText to input variable */
    var input = document.getElementById("myText").value;
     /* Copy the text inside the text field */
    alert("Copied Text: " + input);

We entered the text copy to clipboard article in the input field and now we will click on the copy button. We will see an alert showing the copied text:

Go to a new window or a word file and press CTRL+V which will paste the copy to the clipboard article in that window.


Copy to clipboard button comes in very handy when you are making a website that uses information from one section to another hence improving user experience. Copy to clipboard button is also a project for a beginner who wants to practice his JavaScript skills.

In this post, we implemented the copy to the clipboard button in JavaScript along with screenshots and a GIF.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.