How to create copy to clipboard button ?
Last Updated :
20 Nov, 2023
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 the clipboard.
Syntax:
navigator.clipboard.writeText( <text> )
Where,
<text>: determines string variable to be copied.
Example 1: Here we have added a copy to the 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...