HTML 和 JS 中的复制按钮

在许多 Web 应用程序中，用户可能希望能够方便地将文本复制到剪贴板。 在 HTML 和 JavaScript 中，可以轻松添加一个复制按钮，以实现这一目的。

HTML

HTML 中的复制按钮通常是通过添加一个按钮元素并将其与 JavaScript 事件监听器相关联来实现的。 以下是一个简单的 HTML 示例代码，演示如何创建一个带有“复制到剪贴板”文本的按钮：

<button onclick="copyToClipboard()">复制到剪贴板</button>

请注意，该按钮包含一个“onclick”属性，该属性指定该按钮被单击时要执行的 JavaScript 函数（在此示例中为“copyToClipboard”）。

JavaScript

JavaScript 函数“copyToClipboard”可以使用浏览器的“Clipboard API”来将文本复制到剪贴板。 以下是一个完整的示例代码片段：

function copyToClipboard() {
  var copyText = "要复制的文本内容";

  navigator.clipboard.writeText(copyText).then(function() {
    console.log("已成功复制到剪贴板");
  }, function() {
    console.error("无法复制到剪贴板");
  });
}

请注意，该函数使用“navigator.clipboard.writeText”方法将文本字符串“copyText”写入剪贴板。 如果成功，将记录控制台消息，否则将记录错误消息。

可自定义的复制按钮

除了简单的文本按钮之外，还可以创建具有自定义样式和文本的复制按钮。 以下是一个带有 CSS 样式和自定义文本的 HTML 示例：

<button class="copy-to-clipboard">复制此链接</button>

以下是使用“document.querySelector”方法将按钮与自定义的 JavaScript 事件监听器相关联的 JavaScript 代码：

document.querySelector(".copy-to-clipboard").addEventListener("click", function() {
  var copyText = "http://example.com/link/to/copy";

  navigator.clipboard.writeText(copyText).then(function() {
    console.log("已成功复制到剪贴板");
  }, function() {
    console.error("无法复制到剪贴板");
  });
});

请注意，此示例使用“document.querySelector”方法选择具有“copy-to-clipboard”类的按钮，并为其添加一个点击事件监听器。

结论

HTML 和 JavaScript 中的复制按钮是向 Web 应用程序添加有用功能的简单且常用的技术。 通过使用浏览器的“Clipboard API”，可以使用户更轻松地将文本复制到剪贴板，并提高应用程序的易用性。