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