- In the HTML page add the div tag with id
<div id="copydata">Copy the this text by the button</div>
- Add one button to call the function of JS
<button onclick="copyData()">Copy</button>
- And one input button to paste the copy text
<input type="text" name="" id="" />
- JavaScript Function
<script>
copyData = () => {
var ctype = document.getElementById("copydata").innerHTML;
navigator.clipboard.writeText(ctype);
alert("Copied Done 🤙🤙");
};
</script>
Done ✔🎯
Complete Code ✨👻🤑
<!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>CopyData</title>
</head>
<body>
<div id="copydata">Copy the this text by the button</div>
<button onclick="copyData()">Copy</button>
<br />
<input type="text" name="" id="" />
<script>
copyData = () => {
var ctype = document.getElementById("copydata").innerHTML;
navigator.clipboard.writeText(ctype);
alert("Copied Done 🤙🤙");
};
</script>
</body>
</html>
Paste text
- Add Button tag to call the event listener
<button>Paste</button>
- Add paragraph tag to add the copy text
<p id="clipboard-paste"></p>
- JavaScript function
document.addEventListener('DOMContentLoaded',function(){
let pasteButton = document.getElementsByTagName('button')[1];
pasteButton.addEventListener('click', function () {
navigator.clipboard
.readText()
.then(
cliptext =>
(document.getElementById('clipboard-paste').innerText = cliptext),
err => console.log(err)
);
});
})
Complete code with Copy/Paste 🎉⭐✨
<!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>CopyData</title>
</head>
<body>
<div id="copydata">Copy the this text by the button</div>
<button onclick="copyData()">Copy</button>
<br />
<input type="text" name="" id="" /> <br />
<button onclick="">Paste</button> <br />
<p id="clipboard-paste"></p>
<script>
copyData = () => {
var ctype = document.getElementById("copydata").innerHTML;
navigator.clipboard.writeText(ctype);
alert("Copied Done 🤙🤙");
};
document.addEventListener('DOMContentLoaded',function(){
let pasteButton = document.getElementsByTagName('button')[1];
pasteButton.addEventListener('click', function () {
navigator.clipboard
.readText()
.then(
cliptext =>
(document.getElementById('clipboard-paste').innerText = cliptext),
err => console.log(err)
);
});
}
)
</script>
</body>
</html>
Top comments (0)