JS简单实现点击复制链接的方法

首先，需要在HTML中添加一个按钮，用于触发复制链接的操作。按钮可以使用HTML的buttontag进行创建，并添加一个ID(例如"copy-button")，以便在JavaScript中引用该按钮：

<button id="copy-button">复制链接</button>

接下来，我们需要在JavaScript中实现复制链接的功能。其中，我们可以使用execCommand()方法来实现。该方法可以执行一个指定命令，并可以传递命令相关的参数，从而实现复制链接的效果。我们可以使用document.execCommand("copy")来复制当前处于选中状态的文本或链接的URL地址。

下面是一个简单的实现方法：

function copyToClipboard(text) {
  var input = document.createElement("input");
  input.setAttribute("value", text);
  document.body.appendChild(input);
  input.select();
  document.execCommand("copy");
  document.body.removeChild(input);
}

上面的方法会创建一个input元素并将文本值添加到其value属性中，然后将其添加到页面中、选中该元素中的文本，执行document.execCommand("copy")来复制它，然后删除该元素。

接下来，需要绑定按钮的点击事件，以便在用户单击按钮时调用刚才实现的复制链接函数：

var copyBtn = document.getElementById("copy-button");
copyBtn.addEventListener("click", function() {
  copyToClipboard(window.location.href);
});

上面的代码获取ID为"copy-button"的按钮元素，然后通过addEventListener()方法为其添加一个点击事件监听器。当用户单击该按钮时，它将调用copyToClipboard()函数，并将当前页面的URL地址作为要复制的文本值进行复制。

一个完整的实现示例如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS复制链接示例</title>
  </head>
  <body>
    <p>当前页面的URL地址是：<a href="#" id="link-url">{{url}}</a></p>
    <button id="copy-button">复制链接</button>
    <script>
      function copyToClipboard(text) {
        var input = document.createElement("input");
        input.setAttribute("value", text);
        document.body.appendChild(input);
        input.select();
        document.execCommand("copy");
        document.body.removeChild(input);
      }
      var copyBtn = document.getElementById("copy-button");
      copyBtn.addEventListener("click", function() {
        var urlLink = document.getElementById("link-url");
        copyToClipboard(urlLink.getAttribute("href"));
      });
    </script>
  </body>
</html>

在上面的示例中，我们首先创建了一个<p>标签用于显示当前页面的URL地址，然后在其内部添加了一个带有ID属性的<a>标签用于包含URL地址。接着添加了一个按钮用于复制该URL地址，当用户单击按钮时，我们使用刚才实现的copyToClipboard()函数传递URL地址参数进行复制。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS简单实现点击复制链接的方法 - Python技术站