如何使用 JS 启用点击复制功能 - Javascript

在现代的 Web 开发中，复制和粘贴是一个非常基本的操作。但是，在网页上实现复制和粘贴并不像在本地环境中那样简单。在这篇文章中，我们将介绍如何使用 Javascript 实现点击复制功能，并在页面上添加一个简单的 "复制" 按钮。

实现点击复制功能的基础知识

在了解如何实现点击复制之前，我们先来看一下如何复制文本。JS 中有一个 document.execCommand() 方法，可以用于执行浏览器预定义的命令。其中，包括 copy 命令可以用于复制当前选中的文本。

document.execCommand('copy');

但是，这种方式无法直接复制指定的文本。接下来，我们将看到如何创建一个可以在点击时复制指定文本的按钮。

添加一个点击复制按钮

我们可以使用 HTML 和 CSS 创建一个带有 "复制" 文本和样式的按钮，然后使用 Javascript 将其添加到我们的页面上。

<button class="copy-btn" data-clipboard-text="Hello, world!">Copy</button>

其中，data-clipboard-text 属性用于存储将要被复制的文本内容。接下来，我们将使用 Javascript 获取该属性，并将文本复制到剪贴板中。

使用 Javascript 实现点击复制功能

首先，我们需要获取 "复制" 按钮的 data-clipboard-text 属性的值。我们可以使用以下代码实现：

const copyBtns = document.querySelectorAll('.copy-btn');
copyBtns.forEach(btn => {
  const clipboardText = btn.getAttribute('data-clipboard-text');
  ...
});

然后，我们需要向 "复制" 按钮添加一个点击事件监听器。当用户点击该按钮时，我们将使用 document.execCommand() 方法将 clipboardText 中的文本复制到剪贴板中。

btn.addEventListener('click', e => {
  // Create a temporary textarea element
  const textarea = document.createElement('textarea');
  textarea.setAttribute('readonly', '');
  textarea.style.position = 'absolute';
  textarea.style.left = '-9999px';
  textarea.value = clipboardText;
  document.body.appendChild(textarea);

  // Copy the text from textarea to the clipboard
  const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);

  // Restore the previous selection
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
});

我们首先创建了一个临时的 textarea 元素，并将 clipboardText 的文本设置为其值。然后，我们将 textarea 添加到页面的末尾，并使用 document.execCommand() 复制文本。复制完成后，我们将 textarea 从页面中删除。最后，我们恢复了之前的选择范围。

完整代码

<button class="copy-btn" data-clipboard-text="Hello, world!">Copy</button>

<script>
  const copyBtns = document.querySelectorAll('.copy-btn');
  copyBtns.forEach(btn => {
    const clipboardText = btn.getAttribute('data-clipboard-text');
    btn.addEventListener('click', e => {
      const textarea = document.createElement('textarea');
      textarea.setAttribute('readonly', '');
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      textarea.value = clipboardText;
      document.body.appendChild(textarea);

      const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);

      if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
      }
    });
  });
</script>

结论

现在，我们已经知道如何使用 Javascript 创建一个可以在点击时复制指定文本的按钮了。虽然这个过程不是很复杂，但是实现它需要理解一些基本的 Javascript 操作。我们希望这篇文章可以帮助你更好地理解 Javascript，同时提高你的 Web 开发技能。