时间戳

首页 > 解决方案 > 如何在html中突出显示特定链接和突出显示文本副本的自动？

javascript - 如何在html中突出显示特定链接和突出显示文本副本的自动？

问题描述

我正在尝试创建复制链接，当用户单击链接时，它应该自动复制。

我想要这样的“UPI ID：david@okidfcbank ”相同的链接突出显示为蓝色。

这是我现在尝试的代码：

      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>

标签： javascripthtmlcssformshighlight

解决方案

  1. 您需要通过添加 ID 来指定要复制的链接。
  2. 您需要添加一个 javascript - jQuery“复制功能”。

请点击此链接：

     codepen.io/shaikmaqsood/pen/XmydxJ

这是一个惊人的代码。

推荐阅读