How to highlight specific link and auto of copy of highlighted text in html?

Question

Im trying create copy link, when user click on link it should auto copied.

i want like this " UPI ID: david@okidfcbank" The same link highlight like blue color.

Here is the code i tried now:

      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>

https://codepen.io/shaikmaqsood/pen/XmydxJ here is what you want — Burhan Kashour, Mar 04 '19 at 09:16
Possible duplicate of [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) — Mosh Feu, Mar 04 '19 at 09:17

score 0 · Answer 1 · answered Mar 04 '19 at 09:19

0

You need to specify the link that you want to copy by adding ID.
You need to add a javascript - jQuery " Copy Function ".

Please follow this link :

     codepen.io/shaikmaqsood/pen/XmydxJ

Its an amazing code.

answered Mar 04 '19 at 09:19

Burhan Kashour

589
4
14

if you want to copy the link you need to add an id for it – Burhan Kashour Mar 04 '19 at 09:38

How to highlight specific link and auto of copy of highlighted text in html?

1 Answers1