本文旨在解决 JavaScript 中使用 `navigator.clipboard.writeText()` 方法复制文本到剪贴板时可能遇到的问题。我们将深入探讨导致复制失败的常见原因，例如焦点问题和权限策略限制，并提供相应的解决方案，帮助开发者顺利实现剪贴板复制功能。

剪贴板 API 的使用与常见问题

JavaScript 提供了 navigator.clipboard API 来与系统剪贴板进行交互。其中，navigator.clipboard.writeText(text) 方法可以将指定的文本字符串复制到剪贴板。 然而，在使用过程中，开发者可能会遇到复制失败的情况，导致程序无法正常运行。

1. 焦点问题：Document is not focused

一个常见的错误是 DOMException: Document is not focused。这意味着在尝试复制文本时，当前文档没有获得焦点。为了解决这个问题，需要确保用户与页面进行了交互，使得页面获得焦点。 例如，可以通过点击按钮来触发复制操作。

以下是一个简单的示例，展示了如何通过按钮点击来触发复制操作：

<button onclick="copyText()">复制文本</button>

<script>
  function copyText() {
    navigator.clipboard.writeText("要复制的文本")
      .then(() => {
        console.log("文本已成功复制到剪贴板！");
      })
      .catch(err => {
        console.error("复制文本失败：", err);
      });
  }
</script>

在这个例子中，只有在用户点击按钮后，才会执行 navigator.clipboard.writeText() 方法，此时文档已经获得了焦点，从而避免了 Document is not focused 错误。

2. 权限策略限制：Permissions Policy

另一个可能的问题是权限策略的限制。如果你的代码运行在

要解决这个问题，需要在主页面中设置适当的权限策略，允许

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

例如，要允许来自 example.com 的

Permissions-Policy: clipboard-write=(self "https://example.com")

或者，也可以使用 HTML 的 标签来设置权限策略：

<meta http-equiv="Permissions-Policy" content="clipboard-write=(self, 'https://example.com')">

请注意，self 表示允许同源的页面访问剪贴板。

3. HTTPS 要求

navigator.clipboard API 只能在安全的上下文中（HTTPS）使用。 如果你的网站是通过 HTTP 提供的，那么 navigator.clipboard API 将无法正常工作。 为了解决这个问题，你需要将你的网站迁移到 HTTPS。

4. 错误处理

在使用 navigator.clipboard.writeText() 方法时，务必进行错误处理。 即使在一切看似正常的情况下，复制操作仍然可能失败。 因此，建议使用 .then() 和 .catch() 方法来处理 Promise 的结果，以便在复制成功或失败时执行相应的操作。

navigator.clipboard.writeText("要复制的文本")
  .then(() => {
    console.log("文本已成功复制到剪贴板！");
    // 可选：显示成功提示
  })
  .catch(err => {
    console.error("复制文本失败：", err);
    // 可选：显示错误提示
  });

总结

在使用 JavaScript 的 navigator.clipboard.writeText() 方法时，需要注意焦点问题、权限策略限制和 HTTPS 要求。 通过合理地处理这些问题，你可以确保你的代码能够正确地将文本复制到剪贴板。 记住，良好的错误处理也是至关重要的，它可以帮助你及时发现和解决问题。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南