javascript 复制到剪贴板 - Javascript

在 Web 应用程序中，通常需要将特定的文本内容复制到剪贴板中以便用户进行粘贴操作。而代码实现这一功能的技术就是在 Javascript 中操作剪贴板。在本文中，我们将会介绍一些方法来实现使用 Javascript 将文本复制到剪贴板。

使用 Clipboard API

通过 Clipboard API，我们可以访问剪贴板并对其进行操作。 Clipboard API 提供了一个 Clipboard 类，该类具有读取、写入和清除剪贴板数据的方法。我们可以使用它们中的一个来将文本复制到剪贴板。

复制文本

以下代码片段将复制指定的文本内容到剪贴板中。

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
  .then(() => {
    console.log(`Copied to clipboard: ${text}`);
  })
  .catch(err => {
    console.error(`Could not copy text: ${err}`);
  });
}

copyToClipboard('Hello, world!');

在这个代码片段中，我们首先定义了一个名为 copyToClipboard 的函数，它采用一个名为 text 的参数。在函数主体中，我们使用 navigator.clipboard.writeText() 方法将文本写入剪贴板。然后，我们使用 Promise 监控操作结果。如果操作成功，将会在控制台打印一个成功的消息。否则，我们将在控制台中看到一个错误消息。

对于这段代码的输出，控制台将会显示 Copied to clipboard: Hello, world!。

粘贴文本

以下代码示例演示了如何将剪贴板中的文本粘贴到 Web 页面上。

function pasteFromClipboard() {
  navigator.clipboard.readText()
  .then(text => {
    console.log(`Pasted text: ${text}`);
  })
  .catch(err => {
    console.error(`Could not paste text: ${err}`);
  });
}

pasteFromClipboard();

在这个代码片段中，我们定义了一个名为 pasteFromClipboard 的函数。这个函数利用 navigator.clipboard.readText() 方法从剪贴板中读取纯文本。如果操作成功，则在控制台中显示一个文本值。否则，我们将会在控制台中看到一个错误消息。

对于这段代码的输出，控制台将会显示 Pasted text: ，后面跟着从剪贴板中获取的文本。

使用 document.execCommand

在早期的浏览器中，Clipboard API 并不存在。因此，我们可以使用 document.execCommand 方法来模拟复制操作。我们可以使用以下代码将指定的文字内容复制到剪贴板中。

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

copyToClipboard('Hello, world!');

在这个代码片段中，我们首先创建了一个名为 textarea 的元素，并将它的值设置为文本。然后，我们将这个元素添加到 document.body 中。通过 select() 方法，我们将文本区域的内容选择为活动文本。在这个时候，我们可以使用 document.execCommand('copy') 方法将选定的文本复制到剪贴板中。最后，我们通过 removeChild() 方法将 textarea 元素从页面中删除。

这个方法看起来有些复杂，而且它不支持在大多数移动设备上工作。

总结

在本文中，我们介绍了两种不同的方法来使用 Javascript 将文本复制到剪贴板中。 Clipboard API 提供了一个强大、安全的方式来实现剪贴板操作，但是它需要一些较新的浏览器才能够被支持。在另一方面来说，document.execCommand() 方法可能会有一些不可预料的行为，而且它并不总是可用。如果您需要在多个浏览器之间进行跨浏览器的支持，那么建议您使用 Clipboard API。