JavaScript 实现点击按钮复制文本功能的方法

在网页开发中，实现点击按钮复制文本的功能能够为用户提供极大的便利，比如复制链接、代码片段等。而借助 JavaScript，我们可以轻松达成这一需求。

我们需要创建一个基本的 HTML 结构。在页面中添加一个输入框用于显示要复制的文本，再添加一个按钮用于触发复制操作。例如：

<input type="text" id="textToCopy" value="这里是要复制的文本">
<button onclick="copyText()">复制文本</button>

接下来就是核心的 JavaScript 代码部分。我们通过获取输入框和按钮的元素，然后为按钮添加点击事件监听器。在点击事件的处理函数中，使用 document.execCommand 方法来实现复制功能。具体代码如下：

function copyText() {
  var copyText = document.getElementById("textToCopy");
  copyText.select();
  document.execCommand("copy");
  alert("文本已复制到剪贴板！");
}

在上述代码中，select() 方法用于选中输入框中的文本，execCommand("copy") 则执行复制命令将选中的文本复制到剪贴板，最后通过 alert 提示用户复制成功。

不过，document.execCommand 在一些现代浏览器中存在兼容性问题。为了更好地兼容，我们可以使用新的 API Clipboard API。示例代码如下：

function copyText() {
  var copyText = document.getElementById("textToCopy").value;
  navigator.clipboard.writeText(copyText)
 .then(() => {
      alert("文本已成功复制！");
    })
 .catch((error) => {
      console.error('复制失败：', error);
    });
}

Clipboard API 通过 navigator.clipboard.writeText 方法直接将文本写入剪贴板，操作更为简洁，并且支持 Promise，方便处理异步操作。

在实际应用中，我们还可以对复制功能进行更多的优化和扩展，比如添加复制状态的实时反馈、对复制内容进行加密处理等。通过合理运用 JavaScript 的这些方法，能够为用户带来更加流畅和便捷的交互体验，让网页功能更加完善和实用。无论是小型项目还是大型应用，点击按钮复制文本功能都值得开发者掌握和运用。