Hi dear welcome to Ascode Blog . In this post we are going to learn how to make copy clipboard javascript function onclick copy text. First Creat A index.html file Copy This HTML CODE and pest it one your code editor. 2ndly creat style.css file Then Copy The CSS CODE. 3rdly creat ap.js file Then Copy The Javascript CODE and pest it then open the index.html file with your browser.
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 clipboard js</title>
</head>
<body>
<div class="container">
<span id="Code" >ASCODE50</span>
<span id="Btn" >COPY CODE</span>
</div>
</body>
</style>
</html>
CSS
body {
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
background: #111;
font-family: sans-serif;
}
.container {
display: flex;
background: #fff;
padding: 10px;
border-radius: 4px;
}
#Code {
padding: 5px;
font-size: 2rem;
font-weight: bold;
letter-spacing: 1px;
margin-right: 20px;
}
#Btn {
padding: 5px;
font-size: 2rem;
font-weight: bold;
letter-spacing: 1px;
background: #090;
color: #fff;
border-radius: 4px;
}
Javascript
var Code = document.getElementById("Code");
var Btn = document.getElementById("Btn");
Btn.onclick = function(){
navigator.clipboard.writeText(Code.innerHTML);
Btn.innerHTML = "COPIED";
setTimeout(function(){Btn.innerHTML = "COPY CODE";}, 1000)
}
0 Comments