Hello developers, today in this blog you'll learn to make a Copy Text to Clipboard using HTML, CSS & JS.
When you copy something, your selection is held on the clipboard, where it remains until you copy something or shunt down your computer. This means that you can paste the same data multiple times and in different applications.
In this blog (Copy Text to Clipboard), on a webpage, there are two text area boxes and one copy button. When you click on that copy button, the upper texts will be selected and copied. When you click on the copy button, a small tooltip is used to inform a user that the text has been copied successfully. And you can paste that copied texts to the text area where there is the text as paste your copied content hare. You can also paste the copied texts into any other application.
The source code of this Copy Text to Clipboard is given below, if you want the source code of this program, you can copy it. You can use this Copy Text to Clipboard code on your projects.
Copy Text to Clipboard [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
background: linear-gradient(to right, #38ef7d, #11998e);
height: 100vh;
width: 100%;
}
::selection {
color: #fff;
background: #187bcd;
}
textarea{
background: #12192c;
padding: 20px;
font-size: 17px;
text-align: justify;
color: #fff;
border-radius: 10px;
border: 4px solid #187bcd;
}
textarea:focus{
outline-color: #16a085;
border: 5px solid #16a085;
}
.btn{
margin: 5px 0 40px 0;
}
.btn button{
padding: 9px 15px;
font-size: 17px;
text-transform: uppercase;
font-weight: 500;
background: #187bcd;
border: none;
color: #f2f2f2;
cursor: pointer;
letter-spacing: 1px;
border-radius: 5px;
outline: none;
}
.btn .tooltip{
position: relative;
margin-left: -10px;
font-size: 17px;
font-weight: 500;
color: #f2f2f2;
z-index: 10;
background: #187bcd;
padding: 5px 10px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 1px;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s, margin-left 0.4s;
}
.btn .tooltip.show{
margin-left: 10px;
opacity: 1;
pointer-events: auto;
}
.tooltip:before{
content: '';
position: absolute;
height: 15px;
width: 15px;
background: #187bcd;
top: 50%;
left: -5px;
z-index: -1;
transform: translateY(-50%) rotate(45deg);
}
::-webkit-scrollbar{
width: 5px;
}
::-webkit-scrollbar-track{
background-color: #f7f7f7;
}
::-webkit-scrollbar-thumb{
background-color: #8b9dc3;
cursor: pointer;
}
.credit a{
text-decoration: none;
font-weight: 800;
color: #12192c;
}
.credit {
text-align: center;
font-family: Verdana, Geneva, Tahoma, sans-serif;
color: #000;
}
const copyText = document.querySelector("#copyText");
const pasteText = document.querySelector("#pasteText");
const button = document.querySelector("button");
const tooltip = document.querySelector(".tooltip");
button.addEventListener('click', function(){
copyText.select();
pasteText.value = "";
tooltip.classList.add("show");
setTimeout(function(){
tooltip.classList.remove("show");
},700);
if(document.execCommand("copy")){
pasteText.focus();
}else{
alert("Something went wrong!");
}
});
Thank you for reading our blog. If you face any problem in creating this Copy Text to Clipboard using HTML, CSS & JS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team