I am attempting to implement a feature where users can click on a link and have it automatically copied.
For example, I want it to appear like this: "UPI ID: david@okidfcbank". In this case, the link should be highlighted in blue.
This is the code I have been working with:
const span = document.querySelector("span");
span.onclick = function() {
document.execCommand("copy");
}
span.addEventListener("copy", function(event) {
event.preventDefault();
if (event.clipboardData) {
event.clipboardData.setData("text/plain", span.textContent);
console.log(event.clipboardData.getData("text"))
}
});
<div class="form-group">
<label for="phone">Please Kindly Pay for Registration</label><br>
<div class=" col-md-6 ">
<img class="img-responsive cc-img" src="../img/payment/googlepayImg.png" style="padding-bottom: 10px; padding-top: 10px">
<a href="#facebook_ads_example">UPI ID: david@okidfcbank</a>
<label for="phone" style="font-weight:700; font-size: 17px;">or</label>
<img class="img-responsive cc-img" src="../img/payment/googlepay.png">
</div>
<div class=" col-md-6">
<img class="img-responsive cc-img" src="../img/payment/paytmImg.png" style="padding-bottom: 10px; padding-top: 10px">
<span> Paytm link https://p-y.tm/aVL-Maw </span><br>
<label for="phone" style="font-weight:700; font-size: 17px;">or</label>
<img class="img-responsive cc-img" src="../img/payment/paytm.png"><br>
</div>
</div>