JavaScript 中将文本复制到剪贴板

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 中将文本复制到剪贴板

作者：迹忆客最近更新：2024/03/17 浏览次数：

如今，许多 Web 开发人员都希望在其网站上实现一项功能，该功能使用户只需单击即可直接从其网站复制一堆文本。一些最常用的示例是从任何技术网站复制终端命令或整个代码段。

让我们看看剪贴板对我们什至意味着什么，以及整个过程是如何工作的。之后，我们将在 JavaScript 中实现此复制剪贴板功能。

我们计算机中存在的所有内容，如应用程序、图像、文本、文件等，都被称为数据。因此，每当我们尝试复制计算机中存在的任何内容时，计算机都会将一小部分内存分配给我们已复制的数据，以将该数据存储在该内存空间中。这称为[剪贴板]，这是计算机记住已复制信息的方式。现在我们已将数据存储在内存中，我们可以获取此数据，然后将其粘贴或根据需要多次使用。

从理论上讲，这听起来很简单，但实际上由于包含许多复杂性，因此很难实现。但是不用担心，使用 JavaScript，我们可以借助 Document.execCommand() 方法和 Clipboard API 以一种更简单的方式来完成此任务。

在 JavaScript 中使用 `Document.execCommand()` 方法将文本复制到剪贴板

这是与剪贴板交互的最常用方法。使用此方法，你可以执行以下 3 个操作。

使用 Document.execCommand('copy') 将文本复制到剪贴板中。
使用 Document.execCommand('cut') 剪切文本并将其添加到剪贴板中。
使用 Document.execCommand('paste') 粘贴已经出现在剪贴板上的内容。

注意，我们必须传递我们要执行的操作的参数。在本文中，我们将只关注复制操作，而不关注其他操作。让我们以一个示例并了解此复制操作为例。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>
    <textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>
    <button onclick="copyToClipBoard()">Copy</button>

    <script src="link to your JS file"></script>
  </body>
</html>

function copyToClipBoard() {
  var content = document.getElementById('textArea');

  content.select();
  document.execCommand('copy');

  alert('Copied!');
}

首先，我们有一个 HTML 文件，该文件的 textarea 包含一个字符串和一个 button。我们的目的是在单击 Copy 按钮时复制 textarea 内显示的文本。其次，我们有一个 JS 文件，其中有一个名为 copyToClipBoard() 的函数。此函数将负责将文本复制到剪贴板。

最初，我们必须使用 document.getElementById 在我们的 DOM 中获取 textarea，并将此元素存储在 content 变量中。现在，我们在 content 变量中有了 textarea 的内容。要复制文本，我们首先必须使用 select() 方法选择整个文本。这类似于如何使用鼠标选择文本。

使用 document.execCommand('copy') 方法，我们将复制选定的文本，并且将向用户显示警报，让他知道该文本已被复制到剪贴板。

最后，我们必须在 Copy 按钮上调用 copyToClipBoard() 函数作为 onClick 事件。现在，如果你在浏览器中打开此 HTML 页面，你将看到最终结果。

使用 JavaScript 中的 `Clipboard API` 将文本复制到剪贴板

Clipboard API提供异步读取和写入操作，你可以使用它们在剪贴板中复制和粘贴内容。剪贴板 API 可在 navigator.clipboard 对象中使用。

该 API 是 JavaScript 语言的新增功能，并不是所有的浏览器都能支持它，尤其是旧的浏览器。如果要检查浏览器是否支持此 API，可以使用以下代码。

if (!navigator.clipboard) {
  // Clipboard API not available
  return
}

让我们看看如何使用剪贴板 API 将文本复制到剪贴板。

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
  </head>
  <body>

      <textarea id="textArea">We are learning to copy text to clipboard in JavaScript.</textarea>

      <button id="btn" onclick="copyToClickBoard()">Copy</button>

    <script src="link to your JS file"></script> 
  </body>
</html>

function copyToClickBoard() {
  var content = document.getElementById('textArea').innerHTML;

  navigator.clipboard.writeText(content)
      .then(() => {console.log('Text copied to clipboard...')})
      .catch(err => {
        console.log('Something went wrong', err);
      })
}

上面的代码几乎与我们之前看到的代码相似。唯一的区别是我们修改了 copyToClickBoard() 函数。当我们按下复制按钮时，将调用此方法。在此函数内部，我们首先使用 innerHTML 属性获取 textarea 内的文本，并将该文本存储在 content 变量内。

navigator.clipboard 对象有两种方法。一种是用于将文本复制到剪贴板的 writeText() 方法，另一种是用于读取剪贴板中存在的文本并将其粘贴的 readText() 方法。在这里，我们只关心 writeText() 方法。

在此方法内部，我们必须传递变量 content，该变量当前以字符串格式保存整个文本。之后，此方法将获取文本并将其复制到剪贴板上。如果成功，我们将显示一条消息 Text copied to clipboard...，否则我们将根据发生的错误类型抛出一条错误消息。

上一篇：在 JavaScript 中创建 div 元素

下一篇：在 JavaScript 中使用异常终止一个 forEach 循环

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

迹忆客专注技术分享