复制文本到剪贴板的妙招

2024-01-17 14:22:48

每天我们都会遇到无数需要复制文本的情况，但传统的复制方法往往需要鼠标和键盘的配合，显得繁琐低效。今天，我将介绍一个妙招，让您只需 30 秒设置，即可实现一键复制文本到剪贴板，大幅提升工作效率。

设置步骤：

创建 textarea 元素： <textarea id="copy-helper" style="position: absolute; left: -9999px;"></textarea>
设置文本内容： document.getElementById("copy-helper").value = "要复制的文本";
全选文本： document.getElementById("copy-helper").select();
复制文本： document.execCommand("copy");
移除 textarea 元素： document.getElementById("copy-helper").remove();

使用步骤：

在需要复制文本的页面上，运行上述 JavaScript 代码。
点击或选中要复制的文本。
文本将自动复制到剪贴板，无需任何其他操作。

原理解析：

这个技巧利用了浏览器的一个特性：当创建一个带有文本的 textarea 元素时，该文本会被自动选中。然后，通过执行 document.execCommand("copy") 命令，即可将选中的文本复制到剪贴板。最后，移除 textarea 元素，避免影响页面布局。

优势：

一键复制： 无需鼠标和键盘配合，点击或选中即可复制文本。
高效便捷： 大大节省复制文本的时间，提升工作效率。
通用性强： 适用于大多数浏览器和平台。

实例：

<script>
  // 创建 textarea 元素
  var copyHelper = document.createElement("textarea");
  copyHelper.id = "copy-helper";
  copyHelper.style.position = "absolute";
  copyHelper.style.left = "-9999px";

  // 设置文本内容
  copyHelper.value = "这是要复制的文本";

  // 全选文本
  copyHelper.select();

  // 复制文本
  document.execCommand("copy");

  // 移除 textarea 元素
  copyHelper.remove();
</script>