30 秒教你用 JavaScript 把文本复制到剪贴板

2024-01-17 18:10:11

当需要复制文本到剪贴板时，我们总会想到使用右键菜单，尽管这是最常见的方法，但是用户体验并不太好，特别是当频繁需要复制文本的情况。另外，有些人可能连鼠标都懒得动，更喜欢直接用键盘完成一切。所以在本文中，我们将探讨如何使用 JavaScript 轻松快捷地复制文本到剪贴板，只需要 30 秒就能掌握。

30 秒的 JavaScript 代码

想要复制文本到剪贴板，可以参考以下代码：

// 创建一个文本元素
const textElement = document.createElement('input');

// 赋予文本元素一个默认值
textElement.value = '想要复制的文本';

// 将文本元素加入文档，使之不可见
textElement.style.position = 'absolute';
textElement.style.left = '-9999px';
document.body.appendChild(textElement);

// 选择文本元素中的文本
textElement.select();

// 复制文本元素中的文本
document.execCommand('copy');

// 从文档中移除文本元素
document.body.removeChild(textElement);

以上代码通过创建一个文本元素，并将其置于页面之外，使之不可见。然后选择文本元素中的文本，再使用 document.execCommand('copy') 复制文本。最后从文档中移除文本元素。

工作原理

为了更好地理解代码，我们可以逐行分析它的工作原理：

首先，创建一个文本元素并赋予其想要复制的文本作为默认值。
接着，将文本元素添加到文档中，但将其定位在页面之外，使其不可见。这样做的目的是为了避免文本元素在页面上显示出来，影响页面布局和用户体验。
然后，选择文本元素中的文本。这一步至关重要，因为复制命令只针对选定的文本有效。
接下来的关键一步是使用 document.execCommand('copy') 复制文本。这一行代码会将选定的文本复制到剪贴板。
最后，从文档中移除文本元素。这一步是可选的，但建议这么做，以避免在页面上留下无用的元素。

代码演示

为了直观地展示代码的效果，可以创建一个简单的网页，并在其中添加一个按钮和文本输入框。当点击按钮时，将文本输入框中的文本复制到剪贴板。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <input type="text" id="text-input">
  <button type="button" id="copy-button">复制</button>

  <script>
    const textInput = document.getElementById('text-input');
    const copyButton = document.getElementById('copy-button');

    copyButton.addEventListener('click', () => {
      // 创建一个文本元素
      const textElement = document.createElement('input');

      // 赋予文本元素一个默认值
      textElement.value = textInput.value;

      // 将文本元素加入文档，使之不可见
      textElement.style.position = 'absolute';
      textElement.style.left = '-9999px';
      document.body.appendChild(textElement);

      // 选择文本元素中的文本
      textElement.select();

      // 复制文本元素中的文本
      document.execCommand('copy');

      // 从文档中移除文本元素
      document.body.removeChild(textElement);

      alert('文本已复制到剪贴板！');
    });
  </script>
</body>
</html>