How to create copy to clipboard button ?

0 0 2 minutes read

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"> 
        Geeksforzambiatek 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 
                ("Geeksforzambiatek 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> 