Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to create copy to clipboard button ?

  • Last Updated : 16 Nov, 2021

In this article, we will discuss how to create a copy to the clipboard button.

There are multiple scenarios in web development where we have to give user functionality to copy certain data into a clipboard using a button. Whether it is a sample of code or it is the User’s own information, we can create a copy button to copy data to the clipboard using the navigator.clipboard.writeText() function. This function writes the data fed to it as a parameter into the clipboard. We can use this to copy any text to the clipboard.

First, we select the text to copy to the clipboard whether it is from a div or from an input box using document.getElementById() or any other suitable function. Then we store the value of that text in a variable and pass that variable as an argument to navigator.clipboard.writeText() function to copy it to clipboard.

 

Syntax:

navigator.clipboard.writeText( <text> )

Where

<text>: determines string variable to be copied.

Example 1: Here we have added a copy to clipboard button to a div with text in it to copy the sample text into the clipboard.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            margin: 100px;
        }
  
        #textbox {
            width: 40vw;
            height: 30vh;
            position: absolute;
            margin-left: 50px;
            margin-top: 20px;
        }
  
        button {
            width: 70px;
            height: 40px;
            margin-top: 120px;
            margin-left: 50px;
            background-color: green;
            color: white;
            border-radius: 10px;
            box-shadow: grey;
            position: absolute;
        }
  
        #sample {
            width: 70vw;
            margin: 50px;
            background-color: green;
            color: white;
            padding: 20px;
            font-size: x-large;
            position: absolute;
        }
  
        h1 {
            margin-left: 50px;
            margin-top: 160px;
        }
    </style>
</head>
  
<body>
    <div id="sample">
        Geeksforgeeks is best learning platform.
    </div>
    <br />
      
    <button onclick="copyText()">Copy</button>
    <br />
      
    <h1>Copied Text:</h1><br />
    <textarea id="textbox"></textarea>
      
    <script>
        function copyText() {
      
            /* Copy text into clipboard */
            navigator.clipboard.writeText
                ("Geeksforgeeks is best learning platform.");
        }
    </script>
</body>
  
</html>

Output:

Output

Example 2: Here, we have copied text from a text area where user can write their own text and then copy it to the clipboard, and that text is shown on the lower band also.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        #textbox {
            width: 70vw;
            height: 30vh;
        }
  
        button {
            width: 70px;
            height: 40px;
            background-color: green;
            color: white;
            border-radius: 10px;
            box-shadow: grey;
        }
  
        #clipboard {
            width: 70vw;
            margin: 50px;
            background-color: green;
            color: white;
            padding: 20px;
            font-size: x-large;
        }
    </style>
</head>
  
<body>
    <center>
        <textarea id="textbox"></textarea><br />
        <button onclick="copyText()">Copy</button>
        <br />
        <h1>Copied Text:</h1><br />
        <span id="clipboard">NA</span>
    </center>
  
    <script>
        function copyText() {
      
            /* Select text area by id*/
            var Text = document.getElementById("textbox");
  
            /* Select the text inside text area. */
            Text.select();
  
            /* Copy selected text into clipboard */
            navigator.clipboard.writeText(Text.value);
  
            /* Set the copied text as text for 
            div with id clipboard */
            document.getElementById("clipboard")
                .innerHTML = Text.value;
        }
    </script>
</body>
  
</html>

Output:

Output


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!