How to create copy to clipboard button ?

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
CSS-Properties
CSS-Questions
HTML-Questions
JavaScript-Questions
Picked
CSS
HTML
JavaScript
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Form validation using jQuery
Design a web page using HTML and CSS
REST API (Introduction)
Hide or show elements in HTML using display property
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?
HTTP headers | Content-Type