How to make CopyClipboard with Javascript || CodeWith X
--- SOURCE CODE ---
<!DOCTYPE html>
<html lang="en">
<head>
<title>Copyclipboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<style>
.box {
width: 21%;
padding: 8px 15px;
outline: none;
justify-content: center;
}
</style>
<body>
<center>
<div class="main py-5 my-5">
<H1 class="py-2 my-2">Copy my instagram Link!</H1>
<input type="text" class="box" value="https://www.instagram.com/codewith_x/" id="copy">
<button class="btn btn-primary" onclick="func()">Copy</button>
</div>
</center>
<!-- javascript start here -->
<script>
function func() {
var copytxt = document.getElementById("copy");
copytxt.select();
copytxt.setSelectionRange(0, 99999);
document.execCommand("copy");
alert("Copied");
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
0 Comments