「点击即复制！」——超实用 JavaScript 实现技巧

在 JavaScript 中，点击文本复制是一个常见且有用的需求，尤其在用户体验和快捷操作中广泛应用。下面介绍几种不同的实现方法。

方法 1：使用 document.execCommand('copy')

原理：document.execCommand() 是一种旧式方法，用于在文档上执行特定命令。在支持的浏览器中，execCommand('copy') 可以将选中的内容复制到剪贴板。

步骤：

1、创建一个隐藏的文本区域 <textarea> 元素，将需要复制的内容设置为 <textarea> 的值。

2、通过 JS 选择并聚焦 <textarea>，执行 document.execCommand('copy') 命令，删除文本区域元素。

举个 🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div>

<script>
  function copyToClipboard(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
    alert('文本已复制！');
  }
  const copyElement = document.getElementById('copyText');
  copyElement.addEventListener('click', () => {
    copyToClipboard(copyElement.innerHTML);
  });
</script>

注意点：这是较旧的方法，在一些现代浏览器中逐渐被替代。某些浏览器可能会有安全性限制，使用时需要兼容性处理。

展示为：

方法 2：使用现代的 Clipboard API

原理：Clipboard API 是一个更现代、异步的 API，它允许更简单和更安全的剪贴板操作。使用 navigator.clipboard.writeText() 方法可以将文本复制到剪贴板。

步骤：

1、使用 navigator.clipboard.writeText() 方法，传入需要复制的文本。

2、该方法是异步的，返回一个 Promise，可以用来处理成功或失败的回调。

举个 🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div>

<script>
  function copyToClipboard(text) {
    navigator.clipboard
      .writeText(text)
      .then(() => alert('复制成功！'))
      .catch((err) => alert('复制失败！'));
  }
  const copyElement = document.getElementById('copyText');
  copyElement.addEventListener('click', () => {
    copyToClipboard(copyElement.innerHTML);
  });
</script>

优点：更现代化，支持异步操作；更加安全和可靠，符合浏览器的权限管理。

注意点：需要 HTTPS 环境；某些旧版本浏览器不支持 Clipboard API。

展示内容如方法 1。

方法 3：使用 window.getSelection() + document.execCommand('copy')

原理：使用 window.getSelection() 方法选中 DOM 元素内容，再结合 document.execCommand('copy') 复制选中的内容到剪贴板。

步骤：

1、选择一个 DOM 元素的文本内容。使用 window.getSelection() 选中内容。

2、执行 document.execCommand('copy') 复制选中的文本。

举个 🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div>

<script>
  function copyElementText(id) {
    const element = document.getElementById(id);
    const range = document.createRange();
    range.selectNode(element);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
    alert('文本已复制');
  }
  document.getElementById('copyText').addEventListener('click', () => {
    copyElementText('copyText');
  });
</script>

注意点：适合复制 DOM 元素的可见内容。和 execCommand('copy') 一样，在一些现代浏览器中可能不再推荐。

展示内容如方法 1。

方法 4：使用 input 或 textarea 元素

原理：利用 <input> 或 <textarea> 元素自带的选择和复制功能。可以动态创建一个隐藏的 <input> 或 <textarea>，赋值后选中并复制。

步骤：

1、创建 input 或 textarea 元素，设置需要复制的内容为它的值。

2、使用 select() 方法选中其内容，执行 document.execCommand('copy') 进行复制。

举个  🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div>

<script>
  function copyTextUsingInput(text) {
    const input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    document.execCommand('copy');
    document.body.removeChild(input);
    alert('复制成功！');
  }
  const copyElement = document.getElementById('copyText');
  copyElement.addEventListener('click', () => {
    copyTextUsingInput(copyElement.innerHTML);
  });
</script>

注意点：使用表单元素很简单，但在现代浏览器中可以替换为 Clipboard API。

展示内容如方法 1。

方法 5：使用 jQuery

如果在项目中使用 jQuery，可以采用下面写法：

举个 🌰

<div id="copyText" style="cursor: pointer">点击复制这段文本</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $('#copyText').on('click', function () {
    const content = $(this).text();
    navigator.clipboard
      .writeText(content)
      .then(() => {
        alert('内容已复制！');
      })
      .catch((err) => {
        console.error('复制失败:', err);
      });
  });
</script>

展示内容如方法 1。

方法 6：为移动设备优化的点击复制

原理：移动设备浏览器的交互方式不同，通常不会显示鼠标悬停效果或右键菜单。因此，需要在点击时直接复制文本内容，尤其是在移动端表单和内容展示场景下。

步骤：

1、使用 Clipboard API 或 input 方法创建点击复制行为。

2、在移动设备上触发点击事件并自动复制内容。

举个 🌰

<div id="copyText" style="cursor: pointer">点击在移动端复制这段文本</div>

<script>
  function copyForMobile(text) {
    navigator.clipboard
      .writeText(text)
      .then(() => alert('移动设备上复制成功'))
      .catch((err) => console.error('复制失败', err));
  }
  const copyElement = document.getElementById('copyText');
  copyElement.addEventListener('touchstart', () => {
    copyForMobile(copyElement.innerHTML);
  });
</script>

注意点：针对触屏设备的优化，使用 touchstart 事件来代替传统的 click 事件。

展示为：

方法 7：使用 window.getSelection() 和 document.createRange()

这种方法可以选择文本并复制，适用于复杂的文本结构。

举个 🌰

<div id="copyText" style="cursor: pointer">
  <p>点击复制这段内容</p>
  <div>可能包含多行文本或其他元素。</div>
</div>

<script>
  document.getElementById('copyText').addEventListener('click', () => {
    const range = document.createRange();
    range.selectNodeContents(document.getElementById('copyText')); // 选择内容

    const selection = window.getSelection();
    selection.removeAllRanges(); // 清空之前的选区
    selection.addRange(range); // 添加新选区

    try {
      document.execCommand('copy'); // 复制选中的内容
      alert('内容已复制！');
    } catch (err) {
      console.error('复制失败:', err);
    }

    selection.removeAllRanges(); // 清空选区
  });
</script>

方法 8：使用第三方库（如 clipboard.js）

原理：clipboard.js 是一个轻量级的 JavaScript 库，提供了简单的剪贴板操作方法，适用于各种环境。

安装：可以通过 CDN 或 npm 安装。

npm install clipboard --save

举个 🌰

<div id="copyText" style="cursor: pointer" data-clipboard-text="点击复制这段内容">点击复制这段内容</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
<script>
  const clipboard = new ClipboardJS('#copyText');
  clipboard.on('success', () => {
    alert('内容已复制！');
  });
  clipboard.on('error', (e) => {
    console.error('复制失败:', e);
  });
</script>

总结：

1、现代方法：推荐使用 Clipboard API，因为它支持异步操作和更安全的剪贴板访问方式。使用 Clipboard API 时，确保是在 HTTPS 环境中运行，否则浏览器可能不允许访问剪贴板。

2、兼容性方法：对于旧版浏览器或兼容需求，可以使用 document.execCommand('copy') 来处理。

3、灵活性：通过不同的选项，可以根据需求选择复制整个元素的内容、文本或表单数据，甚至针对移动设备优化复制操作。

4、用户授权：某些浏览器可能要求用户明确授权才能使用剪贴板功能，尤其是涉及敏感数据时。

隐藏点：

1、处理失败：在复制失败时提供有用的信息，例如网络错误或权限问题，可以帮助用户解决问题。

2、样式变化：可以在复制后改变文本的样式（如变色），以明确告诉用户复制操作已完成。

3、重复点击处理：如果文本内容不变，可以在一段时间内禁用复制功能，以避免用户多次点击。