In this article you'll learn how to copy text to the clipboard using JavaScript in just a few steps. This tutorial includes code examples and explanations, so you can easily follow along.
You may have seen in websites that their is a box like structure and button to copy text which is present in that box. In this blog post you will learn how to copy text to clipboard using HTML, CSS & JavaScript.
You can use this type of functionality in websites to let user to copy text, id of particular product, username, text, etc.
So it's simple to make it. Add one input tag and add one div tag or button tag for adding onclick function that copy text to clipboard. Its easy to copy text from input field by simple javascript navigator.clipboard.writeText(input_field.value). Here input_field.value is a value present in input field.
Copy Text to Clipboard Using JavaScript.
File structure:
- Create one folder.
- Open it in your code editor.
- Create two files in that folder index.html and index.css.
I’ve integrated javascript within the html file inside the script tag. You can create a separate file and link it to an html file.
Steps to create a functionality to copy text to clipboard using JavaScript.
Step 1: Create basic design.
First of all, We'll create a basic design. We'll create an input field a button and one message.
Input field: Copy text present in input field.
Button: We'll add image inside it. By clicking on button we'll run a function to copy the text to clipboard and after that we'll show the message ("copied").
Also read: Create toggle button with image inside using HTML, CSS & JavaScript.
Message: To give a message to user that text is copied. We'll show message when text is copied and after a few seconds we'll hide that message automatically.
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>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="input-box">
<input type="text" class="text">
<button class="copy-button" type="button">
<img src="images/copy.png">
<div class="copied-message">
<span class="span">Copied</span>
</div>
</button>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background: linear-gradient(45deg , #43415c , #000);
position: relative;
}
.input-box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 300px;
background-color: #fff;
border-radius: 100px;
display: flex;
align-items: center;
padding: 10px 20px;
}
.input-box input{
width: 100%;
font-size: 25px;
border: none;
outline: none;
padding: 5px 0px;
border-right: 1px solid #000;
}
.copy-button{
border: none;
background-color: transparent;
position: relative;
}
.copy-button img{
width: 40px;
height: 40px;
margin-left: 20px;
cursor: pointer;
}
.copied-message{
position: absolute;
pointer-events: none;
top: 0px;
opacity: 0;
transition: 0.2s;
}
.span{
position: absolute;
background-color: #fff;
color: #000;
font-size: 20px;
padding: 8px 12px;
border-radius: 6px;
}
.span::before{
position: absolute;
content: '';
top: 30px;
width: 12px;
height: 12px;
background-color: #fff;
transform: rotate(45deg);
left: 40px;
}
Output :
Step 2: Hide the message.
So let's hide the message (class='copied_message") by CSS property opacity: 0; .
And also create another class (with name active) with CSS property opacity: 1 and top: -70px; (top: -70px; for showing message above the button.) to show message.
Also read: Show and hide password with checkbox using HTML, CSS and JavaScript.
CSS
.copied-message{
position: absolute;
pointer-events: none;
top: 0px;
opacity: 0;
transition: 0.2s;
}
.active{
opacity: 1;
top: -70px;
}
Output:
As you can see in above image that message is hidden. Now let's add functionality to copy text to clipboard
Step 3: Create functionality to copy text to clipboard.
Now lets add JavaScript to copy text to clipboard. So first of all we'll defined variables for copy-button (to copy text by clicking on it), copied-message(message that show up when text copied), text(input field).
Then we'll run function on click on copy_button (class="copy-button") that first copy the value present in input field (input field with class="text") to clipboard.
After text is been copied, To notify user that the text is copied, we'll show the message that we hide initially (copied-message classname). To show we've just add active class to copied-message class name. By adding this message appears or float up.
Now we also have to remove that message after few seconds, For that we'll add settimeout function. That remove active class name from copied-message class name to hide it again, after 2 seconds.
Also read: Copy random generated password using HTML, CSS and JavaScript.
JavaScript
let copy_button = document.querySelector('.copy-button');
let copied_message = document.querySelector('.copied-message');
let text = document.querySelector('.text');
copy_button.onclick = function(){
navigator.clipboard.writeText(text.value);
copied_message.classList.add('active');
setTimeout(() => {
copied_message.classList.remove('active');
}, 2000);
}
So that's how you can copy text to clipboard using JavaScript.
You may like:
- How to create animate input field using JavaScript.
- How to create an character counter using JavaScript.
- How to add and show character limit in text area using HTML, CSS & JavaScript.
- Dynamically show and hide submit button based on input field value.
- How to create animated message using HTML, CSS & JavaScript.
Final code :
So that's how you can create a functionality to copy the text to clipboard using JavaScript. If you have any question or suggestion feel free to write them in the comment section.
Share your thoughts.