Copying text to the clipboard is a common feature in many web applications. In this tutorial, we’ll build a simple copy-to-clipboard feature using HTML, CSS, and JavaScript. Let’s break down the code and see how everything works together.
HTML Structure:
The HTML part lays out the visual structure of our component. It includes a container <div> with the class copy-box that holds a paragraph (<p>) with the text to be copied, a button that triggers the copy action, and a hidden message that displays “Copied!” once the action is successful. We also link to an external CSS file (style.css) and JavaScript file (script.js) for styling and interactivity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Easy Copy To Clipboard</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="copy-box">
<p class="copy-text" id="text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio
natus hic tenetur nobis alias eveniet?
</p>
<button onclick="copyText()">Copy Text</button>
<div class="copied-msg" id="copiedMsg">Copied!</div>
</div>
<script src="script.js"></script>
</body>
</html>
Styling with CSS:
The CSS file styles the layout to center it on the screen with a clean and modern look. The body uses flexbox to align the .copy-box both horizontally and vertically. The .copy-box has padding, rounded corners, and a shadow to make it visually distinct. The .copy-text section has a light background and padding to visually separate it from the rest. The button is styled with a blue background and white text. Lastly, the .copied-msg is hidden by default and is only shown when the text is successfully copied.
body {
background-color: #1d85dd;
display: flex;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.copy-box {
background-color: #ffffff;
padding: 20px 30px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 400px;
}
.copy-text {
background-color: #e5e5e5;
padding: 10px;
border-radius: 5px;
margin-bottom: 15px;
}
button {
background-color: #1d85dd;
color: #ffffff;
padding: 10px 15px;
border: none;
}
.copied-msg {
color: green;
margin-top: 10px;
display: none;
}
JavaScript Functionality:
The JavaScript file contains a single asynchronous function copyText(). When the button is clicked, this function grabs the text from the paragraph, copies it to the clipboard using the modern navigator.clipboard.writeText() API, and then briefly shows a “Copied!” message for 1.5 seconds. If the copying process fails, an alert notifies the user of the error.
async function copyText() {
const p = document.getElementById("text");
try {
await navigator.clipboard.writeText(p.textContent);
const msg = document.getElementById("copiedMsg");
msg.style.display = "block";
setTimeout(() => {
msg.style.display = "none";
}, 1500);
} catch (err) {
alert("failed to copy" + err);
}
}
Conclusion:
This simple example demonstrates how you can build an interactive copy-to-clipboard feature using basic web technologies. It’s a useful addition for any site that involves sharing code snippets, referral codes, or short text content. With just a few lines of code, you can greatly improve the user experience and functionality of your web pages.
