知识问答

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

发布时间：2026-05-09 23:48:38 浏览量：0

首先，需要在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地址参数进行复制。