JavaScript 文本到剪贴板

在很多时候，程序员需要将一段文本复制到剪贴板中，以便于粘贴到其他地方。在 JavaScript 中，我们可以使用 Clipboard API 来实现这一功能。

Clipboard API 简介

Clipboard API 是 HTML5 API 的一部分，它提供了一种方式来与剪贴板交互。使用 Clipboard API，我们可以读取剪贴板中的内容，也可以将内容复制到剪贴板中。

Clipboard API 包含两个接口：

• Clipboard 接口：封装了访问剪贴板的能力。
• DataTransfer 接口：封装了在剪贴板中传输数据所需的方法。

复制文本到剪贴板

下面我们来看一个例子，演示如何使用 Clipboard API 复制文本到剪贴板中：

function copyToClipboard(text) {
  // 创建一个 textarea 元素，并将文本内容设置为要复制的文本
  const textarea = document.createElement('textarea');
  textarea.value = text;

  // 将 textarea 元素添加到页面中
  document.body.appendChild(textarea);

  // 选中 textarea 中的文本内容
  textarea.select();

  // 将文本内容复制到剪贴板中
  document.execCommand('copy');

  // 移除 textarea 元素
  document.body.removeChild(textarea);
}

// 调用 copyToClipboard 函数，将文本复制到剪贴板中
copyToClipboard('Hello, world!');

在上面的例子中，我们创建了一个 textarea 元素，并将要复制的文本设置为其值。然后，我们将 textarea 元素添加到页面中，并选中其文本内容。最后，我们调用 document.execCommand('copy') 将文本内容复制到剪贴板中。最后，我们移除了添加到页面中的 textarea 元素。

代码片段

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

copyToClipboard('Hello, world!');

总结

在 JavaScript 中，我们可以使用 Clipboard API 的 DataTransfer 接口将文本复制到剪贴板中。在实现时，我们需要创建一个 textarea 元素，在其中插入要复制的文本，并将其添加到页面中。然后我们选中 textarea 中的文本，并将其复制到剪贴板中。最后，我们将添加到页面中的 textarea 元素移除。