轻松复制：在 JavaScript 中实现文本到剪切板的拷贝

2023-06-01 19:33:09

JavaScript中复制文本的便捷指南

引言

在当今数字化世界，复制和粘贴文本已成为必不可少的技能。JavaScript为我们提供了简单而强大的方法来实现这一需求，使我们可以在应用程序、网站和其他平台上轻松复制文本。

基本实现

复制文本最简单的JavaScript代码如下：

function copyText(text) {
  const tempElement = document.createElement('textarea');
  tempElement.value = text;
  document.body.appendChild(tempElement);
  tempElement.select();
  document.execCommand('copy');
  document.body.removeChild(tempElement);
}

使用方法：

只需将此代码添加到你的JavaScript文件中，并调用 copyText(text) 函数即可。其中，text 是你要复制的文本。

扩展功能

为了让复制功能更强大，我们可以对其进行扩展，例如：

添加按钮或链接： 点击时自动复制文本到剪切板。
选择文本范围： 允许用户选择要复制的文本范围。
保存剪切板历史记录： 将复制的文本保存在剪贴板历史记录中，以便快速访问。
跨设备复制： 在不同的设备或平台之间复制文本。

扩展代码示例：

function copyText(element) {
  if (document.selection) {
    const range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    const selection = window.getSelection();
    const range = document.createRange();
    range.selectNode(element);
    selection.removeAllRanges();
    selection.addRange(range);
  }
  document.execCommand('copy');
}

const elements = document.querySelectorAll('.copyable');
elements.forEach(element => {
  element.addEventListener('click', () => copyText(element));
});