Add a One‑Click Copy‑to‑Clipboard Button with JavaScript
This guide shows how to create a simple HTML page with a button that copies paragraph text to the system clipboard using the modern Clipboard API, including full code examples and explanations for both copy and cut operations.
In this article we will learn how to implement a copy‑to‑clipboard feature on a website: when the user clicks a Copy button, the content of a paragraph is copied to the system clipboard and can be pasted anywhere.
Code
We will create a very simple HTML page that displays a paragraph and a copy button.
File:
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy To Clipboard</title>
</head>
<body align="center">
<p id="content">The text to be copied.</p>
<button id="copy">Copy Text</button>
<script src="./script.js"></script>
</body>
</html>File:
script.js// Reference of the paragraph tag
const content = document.getElementById("content");
// Reference of the copy button
const copyBtn = document.getElementById("copy");
// Copy button's onclick handler
copyBtn.onclick = copyToClipboard;
// Method responsible for copying the content
function copyToClipboard() {
navigator.clipboard
.writeText(content.innerText)
.then(() => alert("Copied to clipboard"))
.catch((e) => alert(e.message));
}First we obtain the paragraph element and the copy button, then assign the copyToClipboard function to the button's onclick handler. When the button is clicked, the function uses the HTML5 Clipboard API to write the paragraph's text to the clipboard.
Copy to Clipboard
In the copyToClipboard method we use the Clipboard API.
The Clipboard API can be used in web applications to implement cut, copy, and paste functionality.
The system clipboard is exposed through the global navigator.clipboard object.
The writeText method of the clipboard object requires a string argument that will be written to the clipboard.
It returns a Promise that resolves when the clipboard content is updated; if an error occurs, the Promise is rejected.
Using the same principle we can also implement a cut operation. After copying the text to the clipboard, we simply overwrite the paragraph's innerText with an empty string.
navigator.clipboard
.writeText(content.innerText)
.then(() => {
// Overwrite with an empty string
content.innerText = "";
alert("Copied to clipboard");
})
.catch((e) => alert(e.message));Thank you for reading; if you found this article helpful, please give it a like.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
21CTO
21CTO (21CTO.com) offers developers community, training, and services, making it your go‑to learning and service platform.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.