JS复制内容到剪贴板的两种方式

在 HTML 中复制内容到剪贴板有两种方式。

• 使用 JavaScript 代码，
• 使用 HTML5 中的 Clipboard API。

一、使用 JavaScript 代码复制内容到剪贴板：

<button onclick="copyToClipboard('Hello, world!')">复制到剪贴板</button>
<script>
function copyToClipboard(text) {
  var dummy = document.createElement("textarea");
  document.body.appendChild(dummy);
  dummy.value = text;
  dummy.select();
  document.execCommand("copy");
  document.body.removeChild(dummy);
}
</script>

代码解析：

• 创建了一个按钮，点击按钮时会调用 copyToClipboard() 函数，并传递 "Hello, world!" 作为参数。
• copyToClipboard() 函数的具体逻辑：
  1. 动态创建一个 textarea 元素。
  2. 将要复制的文本设置为 textarea 的值。
  3. 调用 select() 方法选中该文本。
  4. 执行 document.execCommand("copy") 命令，将选中文本复制到剪贴板。
  5. 最后移除创建的 textarea 元素。

二、使用 Clipboard API 复制内容到剪贴板：

<button id="copyBtn">复制到剪贴板</button>
<script>
var copyBtn = document.querySelector("#copyBtn");
copyBtn.addEventListener("click", function(event) {
 event.preventDefault();
 var text = "Hello, world!";
 navigator.clipboard.writeText(text).then(function() {
   console.log("复制成功！");
 }, function() {
   console.log("复制失败！");
 });
});
</script>

代码解析：

• 此方法使用了 Clipboard API 的 navigator.clipboard.writeText() 方法。
• 当用户点击按钮时：
  1. 调用 writeText() 方法，将指定的文本 "Hello, world!" 复制到剪贴板。
  2. 如果操作成功，会在控制台打印“复制成功！”。
  3. 如果操作失败，会在控制台打印“复制失败！”。

注意事项：

• Clipboard API 是现代浏览器中引入的功能，部分旧版浏览器可能不支持。
• 某些浏览器可能需要用户授权，允许网站访问剪贴板功能。